事件冒泡 bubbles cancelBubble stopPropagation() stopImmediatePropagation() 区别
生活随笔
收集整理的這篇文章主要介紹了
事件冒泡 bubbles cancelBubble stopPropagation() stopImmediatePropagation() 区别
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>事件冒泡</title></head><body><h4>bubbles cancelBubble stopPropagation() stopImmediatePropagation() 區別</h4><input type="text" id="test"><button type="button" id="btn" style="height: 30px;width: 200px;">bubbles</button><button type="button" id="btn2" style="height: 30px;width: 200px;">阻止冒泡按鈕</button><button type="button" id="btn3" style="height: 30px;width: 200px;">stopPropagation</button><button type="button" id="btn4" style="height: 30px;width: 200px;">stopImmediatePropagation</button><button type="button" id="btn5" style="height: 30px;width: 200px;">cancelBubble</button><script type="text/javascript">// bubbles cancelBubble stopPropagation() stopImmediatePropagation() 區別// 1.bubbles 返回布爾值 表示當前事件是否會冒泡，只讀// 注意 大部分事件都會冒泡 但是focus blur scroll事件不會冒泡var btn = document.getElementById('btn');var btn2 = document.getElementById('btn2');var btn3 = document.getElementById('btn3');var btn4 = document.getElementById('btn4');var btn5 = document.getElementById('btn5');var test = document.getElementById('test');btn.onclick = function(e) {e = e || window.event;console.log(e.bubbles);}test.onclick = function(e) {e = e || window.event;console.log(e.bubbles);}// 2.stopPropagation() 表示取消事件的進一步冒泡，無返回值// 但是無法阻止同一事件的其他監聽函數被調用// ie8 瀏覽器不支持btn2.onclick = function(e) {e = e || window.event;// 阻止冒泡e.stopPropagation();this.innerHTML = '阻止冒泡'}btn3.addEventListener('click', function(e) {e = e || window.event;e.stopPropagation();this.innerHTML = '修改了'});btn3.addEventListener('click', function(e) {e = e || window.event;this.style.backgroundColor = 'lightblue';});// 上層事件 觀察是否冒泡使用document.body.onclick = function(e) {e = e || window.event;console.log('body');}// 3.stopImmediatePropagation() 既可以阻止冒泡，也可以阻止同一事件的其他監聽函數被調用btn4.addEventListener('click', function(e) {e = e || window.event;e.stopImmediatePropagation();this.innerHTML = '修改了'});btn4.addEventListener('click', function(e) {e = e || window.event;this.style.backgroundColor = 'lightblue';})// 4.cancelBubble 屬性用于阻止冒泡，可讀寫// 默認值為false// 當設置為true，cancelBubble可以取消事件冒泡btn5.addEventListener('click', function(e) {e = e || window.event;e.cancelBubble = true;this.innerHTML = '修改了'});</script></body>
</html>
阻止事件冒泡兼容寫法
// 兼容 stopPropagation() stopImmediatePropagation() ie8不支持// e.cancelBubble = true; 全瀏覽器都支持 不是標準寫法// 兼容寫法var handler = function (e) {e = e || window.event;if(e.stopPropagation) {e.stopPropagation();} else {e.cancelBubble = true;}}?
總結
以上是生活随笔為你收集整理的事件冒泡 bubbles cancelBubble stopPropagation() stopImmediatePropagation() 区别的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： vue3学习笔记 Composition
- 下一篇： vite2.1 最新alias别名设置方