阻止事件冒泡

原创于 2022-11-23 22:42:56 发布 · 321 阅读

CC 4.0 BY-SA版权

文章标签：

这篇博客探讨了JavaScript中点击事件的处理，特别是事件冒泡现象以及如何通过event.stopPropagation()方法阻止事件冒泡。示例代码展示了在儿子元素和父亲元素上分别添加点击事件监听器，并在儿子元素上阻止事件冒泡，从而确保点击事件仅在儿子元素上触发，不会影响到父级元素或document的事件处理。

    <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        // onclick 和 attachEvent（ie） 在冒泡阶段触发
        // 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 
        // son -> father ->body -> html -> document
        var son = document.querySelector('.son');
		// 给son注册单击事件
        son.addEventListener('click', function(event) {
           event.stopPropagation()
            alert('son');
        }, false);
		// 给father注册单击事件
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, false);
		// 给document注册单击事件，省略第3个参数
        document.addEventListener('click', function() {
            alert('document');
        })
    </script>