JavaScript實現(xiàn)事件的中斷傳播和行為阻止方法示例
更新時間：2017年01月20日 08:40:43 作者：Poetry
這篇文章主要給大家介紹了利用JavaScript實現(xiàn)事件的中斷傳播和行為阻止的方法示例，文中給出了詳細的介紹和示例代碼，相信對大家的理解和學習具有一定的參考借鑒價值，需要的朋友們下面來一起看看吧。
事件傳播
MicroSoft的設計是當事件在元素上觸發(fā)時，該事件將接著在該節(jié)點的父節(jié)點觸發(fā)，以此類推，事件一直沿著DOM樹向上傳播，直到到達頂層對象document元素。這種自底向上的事件傳播方式稱為“事件冒泡”，也就是事件傳播。
如何中斷事件的傳播？
stopPropagation() w3c取消冒泡
cancleBubble = true IE取消冒泡
取消事件默認效果：
returnValue = false IE 取消事件效果
defaultPrevent() w3c取消事件效果
<div id='aa'> <div id='bb'> <div id ='cc'></div> </div> </div>
#aa{
width: 600px;
height: 600px;
background: gray;
}
#bb{
width: 400px;
height: 400px;
background: green;
}
#cc{
width: 200px;
height: 200px;
background: red;
}
捕捉寫法停止傳播 從最頂層開始往下
document.getElementById('aa').addEventListener('click',function (ev){alert('aa');ev.stopPropagation();},true);// 結果捕捉到aa 加true 由冒泡變?yōu)椴蹲?從上到下
document.getElementById('bb').addEventListener('click',function (){alert('bb')},true);
document.getElementById('cc').addEventListener('click',function (){alert('cc')},true);
冒泡寫法停止傳播 從下往上
document.getElementById('aa').addEventListener('click',function (){alert('aa');});//加true 由冒泡變?yōu)椴蹲?從上到下
document.getElementById('bb').addEventListener('click',function (){alert('bb')});
document.getElementById('cc').addEventListener('click',
function (ev){
alert('cc');
ev.stopPropagation();
// ev.cancleBubble = true;//IE下 取消冒泡方法
}); //結果是冒出cc 停止傳播
}
取消事件效果
returnValue = false //IE 取消事件效果
preventDefault() //w3c取消事件效果
document.getElementsByTagName('a')[0].onclick = function (ev){
alert('點擊');
//達到事件結束的效果 但是函數還是往下運行
//
ev.preventDefault();
alert('已經攔截');
}
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。
相關文章
這篇文章主要介紹了基于JS+HTML實現(xiàn)彈窗提示是否確認提交功能,需要的朋友可以參考下2020-06-06
本文給大家介紹關于文件上傳非ajax提交得到后臺數據的問題我們該怎么處理呢？下文給大家介紹的非常詳細，感興趣的朋友一起看看吧2016-10-10
獲取表單控件原始值在某些時候還是比較實用的，具體的獲取方法如下，感興趣的朋友可以參考下，希望對大家有所幫助2013-08-08
這篇文章主要介紹了JS實現(xiàn)單擊輸入框彈出選擇框效果的方法,涉及JavaScript響應鼠標事件動態(tài)操作頁面元素與相關屬性的實現(xiàn)技巧,需要的朋友可以參考下2015-12-12
js需要把時間戳轉為為普通格式，一般的情況下可能用不到的，下面與大家分享幾種不錯的方法，感興趣的朋友不要錯過2013-11-11
這篇文章主要介紹了JS實現(xiàn)alert中顯示換行的方法,實例分析了兩種實現(xiàn)alert換行的實現(xiàn)技巧,非常簡單實用,需要的朋友可以參考下2015-12-12
js中document.referrer實現(xiàn)移動端返回上一頁
本文主要介紹了document.referrer實現(xiàn)移動端返回上一頁的方法，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
本篇文章主要介紹了微信小程序實現(xiàn)下載進度條的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
這篇文章主要為大家詳細介紹了小程序實現(xiàn)購物車完整版，實現(xiàn)加減計算數量跟金額，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
這篇文章主要為大家詳細介紹了JavaScript希爾排序、快速排序、歸并排序算法，感興趣的朋友可以參考一下2016-05-05