您現在的位置是：首頁 > 棋牌
JavaScript阻止冒泡和取消預設事件(預設行為)
- 由 酷扯兒 發表于 棋牌
- 2023-02-02
如何阻止事件冒泡
「來源： ｜web前端開發 ID：web_qdkf」
JavaScript冒泡和捕獲是事件的兩種行為，使用event。stopPropagation（）起到阻止捕獲和冒泡階段中當前事件的進一步傳播。使用event。preventDefault（）可以取消預設事件。
防止冒泡和捕獲
w3c的方法是e。stopPropagation（），IE則是使用e。cancelBubble = true
stopPropagation也是事件物件（Event）的一個方法，作用是阻止目標元素的冒泡事件，但是會不阻止預設行為。
什麼是冒泡事件？如在一個按鈕是繫結一個”click”事件，那麼”click”事件會依次在它的父級元素中被觸發 。
stopPropagation就是阻止目標元素的事件冒泡到父級元素。如：
上面的程式碼，Demo如下，我們單擊test時，會依次觸發alert（“li”），alert（“ul”），alert（“div”），這就是事件冒泡。
阻止冒泡
window。event？ window。event。cancelBubble = true ： e。stopPropagation（）；
取消預設事件
w3c的方法是e。preventDefault（），IE則是使用e。returnValue = false；
preventDefault它是事件物件（Event）的一個方法，作用是取消一個目標元素的預設行為。既然是說預設行為，當然是元素必須有預設行為才能被取消，如果元素本身就沒有預設行為，呼叫當然就無效了。
什麼元素有預設行為呢？如連結，提交按鈕等。當Event 物件的 cancelable為false時，表示沒有預設行為，這時即使有預設行為，呼叫preventDefault也是不會起作用的。
我們都知道，連結的預設動作就是跳轉到指定頁面，下面就以它為例，阻止它的跳轉：
//假定有連結 fly63。comvar a = document。getElementById（“testA”）；a。onclick =function（e）{if（e。preventDefault）{e。preventDefault（）；}else{window。event。returnValue == false；}}
return false
JavaScript的return false只會阻止預設行為，而是用jQuery的話則既阻止預設行為又防止物件冒泡。
下面這個使用原生js，只會阻止預設行為，不會停止冒泡
下面這個是使用jQuery，既阻止預設行為又停止冒泡
總結使用方法
當需要停止冒泡行為時，可以使用
functionstopBubble（e） { //如果提供了事件物件，則這是一個非IE瀏覽器if （ e && e。stopPropagation ） //因此它支援W3C的stopPropagation（）方法 e。stopPropagation（）； else//否則，我們需要使用IE的方式來取消事件冒泡 window。event。cancelBubble = true； }
當需要阻止預設行為時，可以使用
//阻止瀏覽器的預設行為 functionstopDefault（ e ） { //阻止預設瀏覽器動作（W3C） if （ e && e。preventDefault ） e。preventDefault（）； //IE中阻止函式器預設動作的方式 elsewindow。event。returnValue = false； returnfalse； }
事件注意點
event代表事件的狀態，例如觸發event物件的元素、滑鼠的位置及狀態、按下的鍵等等；
event物件只在事件發生的過程中才有效。
firefox裡的event跟IE裡的不同，IE裡的是全域性變數，隨時可用；firefox裡的要用引數引導才能用，是執行時的臨時變數。
在IE/Opera中是window。event，在Firefox中是event；而事件的物件，在IE中是window。event。srcElement，在Firefox中是event。target，Opera中兩者都可用。
下面兩句效果相同：
functiona（e）{var e = （e） ？ e ： （（window。event） ？ window。event ： null）； var e = e || window。event； // firefox下window。event為null， IE下event為null}
總結
感謝您的時間，感謝您的閱讀。
學習更多技能
