萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> Js冒泡事件詳解及阻止示例

Js冒泡事件詳解及阻止示例

 如果某元素定義了事件A,如click事件,如果觸發了事件之後,沒有阻止冒泡事件,那麼事件將向父級元素傳播

Js冒泡機制是指如果某元素定義了事件A,如click事件,如果觸發了事件之後,沒有阻止冒泡事件,那麼事件將向父級元素傳播,觸發父類的click函數。  如下例所示:   代碼如下: <html>  <script type="text/javascript" src="jquery-1.7.1.js"></script>  <script>  function ialertdouble(e) {  alert('innerdouble');  stopBubble(e);  }    function ialertthree(e) {  alert('innerthree');  stopBubbleDouble(e);  }    function stopBubble(e) {  var evt = e||window.event;  evt.stopPropagation?evt.stopPropagation():(evt.cancelBubble=true);//阻止冒泡  }    function stopBubbleDouble(e) {  var evt = e||window.event;  evt.stopPropagation?evt.stopPropagation():(evt.cancelBubble=true);//阻止冒泡  evt.preventDefault();//阻止浏覽器默認行為,這樣鏈接就不會跳轉  }    $(function() {  //方法一  //$('#jquerytest').click(function(event) {  // alert('innerfour');  // event.stopPropagation();  // event.preventDefault();  //});    //方法二  $('#jquerytest').click(function() {  alert('innerfour');  return false;  });  });  </script>  <div onclick="alert('without');">without  <div onclick="alert('middle');">middle  <div onclick="alert('inner');">inner</div>  <div onclick="ialertdouble(event)">innerdouble</div>  <p><a href='http://www.baidu.com' onclick="ialertthree(event)">innerthree</a></p>  <p id='jquerytest'><a href='http://www.baidu.com'>innerfour</a></p>  </div>  </div>  </html>    當你點擊inner的時候,會依次彈出‘inner',‘middle'和‘without'。這就是事件冒泡。    從直觀上來看,也是這樣的,因為最裡層的區域是在父級節點中的,點擊了子級節點的區域,其實也是點擊了父級節點的區域,所以事件會傳播起來。    其實,很多的時候,我們並不想事件冒泡,因為這樣會同時觸發幾個事件。    接下來:我們點擊innerdouble。就會發現她並沒有冒泡,因為她在調用的方法ialertdouble()中調用了stopBubble()方法,方法通過判斷浏覽器類型(Ie通過cancleBubble() 、firefox通過stopProgation())來阻止冒泡。    但如果是鏈接的話,我們會發現她也會阻止冒泡,但是會跳轉,這就是浏覽器的默認行為。需要借助preventDefault()方法來阻止。具體可以查看ialertthree()。    目前主流的都是借助jquery來綁定click事件的,這樣的話,就簡單多了。    我們可以在點擊事件時傳入參數event,然後直接    event.stopPropagation();  event.preventDefault(); //沒有鏈接不需要加這個。    這樣就可以了。    框架就是好,其實還有更簡單的,在事件處理程序中返回false,這是對在事件對象上同時調用stopPropagation()和preventDefault()的一種簡寫方式。  【詳細代碼見上面,記得載入jquery.js。】    其實也還可以在每個click事件中加入判斷:   代碼如下: $('#id').click(function(event){  if(event.target==this){  //do something  }  })    解析:事件處理程序中的變量event保存著事件對象。而event.target屬性保存著發生事件的目標元素。這個屬性是DOM API中規定的,但是沒有被所有浏覽器實現 。jQuery對這個事件對象進行了必要的擴展,從而在任何浏覽器中都能夠使用這個屬性。通過.target,可以確定DOM中首先接收到事件的元素(即實際被單擊的元素)。而且,我們知道this引用的是處理事件的DOM元素,所以可以編寫以上代碼。    不過推薦使用return false,Jquery綁定事件的話。   
copyright © 萬盛學電腦網 all rights reserved