文章内容
2023/7/26 18:44:49,作 者: 黄兵
JavaScript 冒泡理解
最近在项目上遇到一个问题：我监控页面上的一个按钮 click 事件，但是同时我也监控 document 的点击事件，点击按钮打开遮罩，同时点击页面空白部分（出发了 document 的单击事件），关闭遮罩。
如果是这样的话，我们就会遇到一个问题：我们永远也打不开遮罩，因为我们点击按钮的时候，同时也触发了 document 的点击事件，也就是在打开遮罩的同时，几乎我们人眼无法察觉的速度，关闭遮罩。
这就涉及到事件冒泡，事件冒泡就像水底的泡泡一样，慢慢从水底向上，在向上的过程中，如果符合条件，则会触发事件（我们点击一个按钮，事件冒泡就会遍历父元素，如果父元素符合条件，就会触发事件）。
通过上面的解释，我们可以理解：单击页面按钮，产生事件冒泡，之后一层一层的向父元素遍历，最后由于我们监控了 document 的点击事件，同时 document 是整个页面的父元素，所以符合要求，触发了事件。
通过上面的分析，也就是我们需要阻止事件冒泡，当点击按钮的时候，我们需要禁止事件冒泡继续遍历父元素。
下面是 JavaScript 阻止事件冒泡的示例：
window.ticketLeftMenuAction = function () {
const button = document.getElementById('kt_inbox_aside_toggle');
const elementToModify = document.querySelector('[data-kt-drawer-toggle="#kt_inbox_aside_toggle"]');
const body = document.body;
let isOverlayAdded = false; // 用于判断是否已经添加了 overlay
button.addEventListener('click', function (event) {
event.stopPropagation();
if (!isOverlayAdded) {
elementToModify.classList.add('drawer-on');
const overlayDiv = document.createElement('div');
overlayDiv.setAttribute('style', 'z-index: 987;');
overlayDiv.classList.add('drawer-overlay');
body.appendChild(overlayDiv);
isOverlayAdded = true;
} else {
const overlayDiv = document.querySelector('.drawer-overlay');
if (overlayDiv) {
body.removeChild(overlayDiv);
}
isOverlayAdded = false;
}
});
// 监听 document 点击事件
document.addEventListener('click', function (event) {
const overlayDiv = document.querySelector('.drawer-overlay');
if (overlayDiv && event.target !== button && overlayDiv.contains(event.target)) {
body.removeChild(overlayDiv);
isOverlayAdded = false;
// 删除 data-kt-drawer-toggle="#kt_inbox_aside_toggle" 上的 "drawer-on" 类
elementToModify.classList.remove('drawer-on');
}
});
}
const button = document.getElementById('kt_inbox_aside_toggle');
const elementToModify = document.querySelector('[data-kt-drawer-toggle="#kt_inbox_aside_toggle"]');
const body = document.body;
let isOverlayAdded = false; // 用于判断是否已经添加了 overlay
button.addEventListener('click', function (event) {
event.stopPropagation();
if (!isOverlayAdded) {
elementToModify.classList.add('drawer-on');
const overlayDiv = document.createElement('div');
overlayDiv.setAttribute('style', 'z-index: 987;');
overlayDiv.classList.add('drawer-overlay');
body.appendChild(overlayDiv);
isOverlayAdded = true;
} else {
const overlayDiv = document.querySelector('.drawer-overlay');
if (overlayDiv) {
body.removeChild(overlayDiv);
}
isOverlayAdded = false;
}
});
// 监听 document 点击事件
document.addEventListener('click', function (event) {
const overlayDiv = document.querySelector('.drawer-overlay');
if (overlayDiv && event.target !== button && overlayDiv.contains(event.target)) {
body.removeChild(overlayDiv);
isOverlayAdded = false;
// 删除 data-kt-drawer-toggle="#kt_inbox_aside_toggle" 上的 "drawer-on" 类
elementToModify.classList.remove('drawer-on');
}
});
}
上面的 event.stopPropagation() 就是阻止事件冒泡的方法。
这样就达到了我们的要求。
其它相关推荐：
2、js中event的target和currentTarget的区别
黄兵个人博客原创。
转载请注明出处：黄兵个人博客 - JavaScript 冒泡理解
评论列表