如何解決click事件重複的問題？

jquery解決點擊事件冒泡

首先我們先了解下什麼是冒泡？如果不加以解釋相信不少人都不太清楚究竟什麼是冒泡？
我們可以這樣解釋：
所謂冒泡就是頁面尚可以有多個事件，也可以多個元素響應同一個事件，假設網頁上的兩個元素是重疊或者嵌套關係，並且都綁定了click事件，那麼當我們點擊其中一個元素時我們就發現了一個奇怪的現象那就是兩個click事件均被觸發了。

我們來看下一個示意圖：

dom關係如下所示：

<div class="mui-scroll" style="margin-top:20px">                                
  <ul class="mui-table-view">
     <li class="mui-table-view-cell">
       <a class='mui-navigate-right'>
          <span>夏守成</span>
         <span style=' float:right; font-size:9px;margin-right: 20px;color: #8f8f94;'>高手</span>
         <button class="mui-btn btn-blue">刪除</button>
       </a>
     </li>
 </ul>
</div>

如圖所示我們爲兩個部分均加上點擊事件，

//爲按鈕設置點擊事件
$(".mui-scroll").on("click",function(event){
   alert("你點擊了整個條目");
})

$(".btn-blue").on("click",function(event){
   alert("你點擊了刪除按鈕");
})

運行效果如下所示：


我們可以看到兩個事件均被觸發。

OK!從上面估計大家已經知道了冒泡是什麼了？

其實解決冒泡的方法非常的簡單，利用jquery我們可以很簡單的解決。

//爲按鈕設置點擊事件
$(".mui-scroll").on("click",function(event){
   alert("你點擊了整個條目");
   event.stopPropagation();
})

$(".btn-blue").on("click",function(event){
   alert("你點擊了刪除按鈕");
   event.stopPropagation();
})

如上圖所示只需在click的函數中加上一個event。使用

event.stopPropagation();就完美了

具體效果自己試試吧。