新聞中心
這篇文章主要介紹JavaScript如何實現(xiàn)事件的中斷傳播和行為阻止方法,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
創(chuàng)新互聯(lián)建站服務項目包括尼瑪網站建設、尼瑪網站制作、尼瑪網頁制作以及尼瑪網絡營銷策劃等。多年來,我們專注于互聯(lián)網行業(yè),利用自身積累的技術優(yōu)勢、行業(yè)經驗、深度合作伙伴關系等,向廣大中小型企業(yè)、政府機構等提供互聯(lián)網行業(yè)的解決方案,尼瑪網站推廣取得了明顯的社會效益與經濟效益。目前,我們服務的客戶以成都為中心已經輻射到尼瑪省份的部分城市,未來相信會繼續(xù)擴大服務區(qū)域并繼續(xù)獲得客戶的支持與信任!
事件傳播
MicroSoft的設計是當事件在元素上觸發(fā)時,該事件將接著在該節(jié)點的父節(jié)點觸發(fā),以此類推,事件一直沿著DOM樹向上傳播,直到到達頂層對象document元素。這種自底向上的事件傳播方式稱為“事件冒泡”,也就是事件傳播。
如何中斷事件的傳播?
stopPropagation()
w3c取消冒泡
cancleBubble = true
IE取消冒泡
取消事件默認效果:
returnValue = false
IE 取消事件效果
defaultPrevent()
w3c取消事件效果
#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)椴蹲?nbsp;從上到下 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)椴蹲?nbsp;從上到下 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('已經攔截'); }
以上是“JavaScript如何實現(xiàn)事件的中斷傳播和行為阻止方法”這篇文章的所有內容,感謝各位的閱讀!希望分享的內容對大家有幫助,更多相關知識,歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
標題名稱:JavaScript如何實現(xiàn)事件的中斷傳播和行為阻止方法
URL網址:http://www.dlmjj.cn/article/jhhdgs.html