欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

在點擊div中的p時，如何阻止事件冒泡

 更新時間：2017年02月07日 10:35:15   作者：九九smile  
本文主要介紹了在點擊div中的p時，如何阻止事件冒泡的方法，具有很好的參考價值，下面跟著小編一起來看下吧

今天整理筆記，發(fā)現(xiàn)在學習javaScript的過程中，遇到過一個在當時看來很棘手的問題，現(xiàn)在特地總結(jié)一下，也希望能幫助到曾像我一樣迷惘的初學者。

我還是以一個案例來說明問題，html代碼如下：

 <div onclick="show('a')">
   <p onclick="show('b')"></p>
 </div>

css代碼如下：

div{
  width:500px;
  height:500px;
  background:red;
 }
 p{
  width:200px;
  height:200px;
  background:blue;
 }

js代碼如下：

 function show(info){
    alert(info);
 }

稍微懂點js的人都知道當我點擊p時，基于事件冒泡機制，會觸發(fā)父元素div的onclick事件，結(jié)果是先彈出b、再彈出a。

那么問題來了，如何修改show()這個函數(shù)而只彈出b？我第一次的解決方法是（各位大神勿噴）：

function show(e,info){
 function cancelBubble(e){
  e = e || window.event;
  if (e.stopPropagation) {  
     e.stopPropagation(); 
  }else {   
     e.cancelBubble = true; 
  } 
 }
 alert(info);
}

結(jié)果老是報錯。我就開始各種百度，最終解決方法如下：

function show(info){
   alert(info);
   cancelBubble();
}
function cancelBubble(e) { 
   var evt = e ? e : window.event; 
    if (evt.stopPropagation) {  //W3C 
     evt.stopPropagation(); 
    }else {  //IE  
     evt.cancelBubble = true; 
    } 
}

至于為什么這樣？我分析的是這樣做有兩個好處：1.阻止了事件冒泡，達到只彈出b目的; 2.將阻止事件冒泡的代碼封裝成了一個函數(shù)，可以多次調(diào)用。

好了，問題圓滿解決。

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

相關(guān)文章

最新評論