首页 > 代码库 > 一个场合, 事件捕获派上了用处

一个场合, 事件捕获派上了用处

2024-08-24 01:29:20   218人阅读

场景:

　　(比较少见) 如果有个js生成的dom元素, 里面绑定了一些click 事件, 我们想在不hack原先代码的情况下, 把dom 里面的事件拦截.

思路:

　　事件机制有捕获和冒泡, 现在主流浏览器的事件都是冒泡机制, 即从事件发生的dom元素开始层层向上出发, 对于我们要拦截的dom, 显然没法在它的更深层次 event.stopPropagation(), 所以目标dom始终会被先触发. 

　　换个思路, 捕获机制则相反, 从顶层的dom元素开始层层深入, 这就给了拦截一个机会. 找到目标dom 的外层元素, 阻止事件传递即可.

 

代码:

1 <div class="outer">
2     <div class="inner">
3         hello
4     </div>
5 </div>
 1 $(function () {
 2     $inner = $(".inner");
 3     $inner.on(‘click‘, function () {
 4         console.log(‘inner‘);
 5     })
 6     document.querySelector(".outer").addEventListener("click", function (event) {
 7         console.log(‘outer‘);
 8         event.stopPropagation();
 9     }, true);
10 })

 

addEventListener 的第三个参数是捕获模式标志位.

 

点击outer内部的任意区域, inner 都不会被触发, 只会输出: 

"outer"  ("inner" 将会被拦截, 不打印)

一个场合, 事件捕获派上了用处


联系
我们