首頁 > web前端 > js教程 > 淺談javascript事件取消並阻止冒泡

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

PHPz
發布: 2018-10-12 14:58:00
原創
1443 人瀏覽過

取消預設操作

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影片教學
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板