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

场景:

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

思路:

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

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

 

代码:

<div class="outer">
    <div class="inner">
        hello
    </div>
</div>

$(function () {
    $inner = $(".inner");
    $inner.on('click', function () {
        console.log('inner');
    })
    document.querySelector(".outer").addEventListener("click", function (event) {
        console.log('outer');
        event.stopPropagation();
    }, true);
})

 

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

 

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

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