淺談javascript事件取消並阻止冒泡

取消預設操作

w3c的方法是e.preventDefault()，IE則是使用e.returnValue = false;

在支援addEventListener()的瀏覽器中，也能透過呼叫時間物件的preventDefault()方法取消時間的預設操作。不過，在IE9之前的IE中，可以透過設定事件物件的returnValue屬性為false來達到相同的效果。下面的程式碼假設一個事件處理程序，它使用全部的三種取消技術：

function cancelHandler(event){
  var event = event || window.event;  //用于IE
  if(event.preventDefault) event.preventDefault();  //标准技术
  if(event.returnValue) event.returnValue = false;  //IE
  return false;   //用于处理使用对象属性注册的处理程序
}

目前的DOM事件模型草案定義了Event物件屬性defaultPrevented。

return false

javascript的return false只會阻止預設行為，而是用jQuery的話則阻止預設行為又防止物件既冒泡。

 程式碼如下:

var a = document.getElementById("testB");
　　a.onclick = function(){
　　return false;
};

阻止冒泡

阻止冒泡

w3c的方法是w3c的方法是用e. )，IE則是使用e.cancelBubble = true

在支援addEventListener()的瀏覽器中，可以呼叫事件物件的一個stopPropagation()方法已阻止事件的繼續傳播。如果在同一物件上定義了其他處理程序，剩下的處理程序將依舊被調用，但調用stopPropagation()方法可以在事件傳播期間的任何時間調用，它能工作在捕獲階段、事件目標本身中和冒泡階段。

IE9之前的IE不支援stopPropagation()方法。相反，IE事件物件有一個cancleBubble屬性，設定這個屬性為true能阻止事件進一步傳播。 （IE8及之前版本不支援事件傳播的捕獲階段，所以冒泡是唯一待取消的事件傳播。）

當前的DOM事件規範草案在Event對像上定義了另一個方法，命名為stopImmediatePropagation ()。類似stopPropagation(),這個方法組織了任何其他物件的事件傳播，但也阻止了在相同物件上註冊的任何其他事件處理程序的呼叫。

function stopHandler(event)
    window.event?window.event.cancelBubble=true:event.stopPropagation();
}

程式碼如下:

以上所述上就是本文的全部內容了，希望大家能夠喜歡。

更多相關教學請造訪 JavaScript影片教學