略微加速

略速 - 互联网笔记

JS点击事件的重叠处理(多个点击事件出现冲突)

2020-12-01 leiting (2330阅读)

标签 JavaScript

最近开发遇见了一个这个样的情况,一个button在一个div中,点击buton是一个事件,点击大的div也是一个事件,但是由于button在div中,点击button会把两个事件都执行了,但是我们想点击button的时候不去执行大div的事件。层次如图:

解决方法 :

在button的点击事件执行的时候调使用   event.stopPropagation() 方法,具体使用如下代码:

复制代码

    //点击button的方法
    function clickBtn(event){

        //具体的事件内容。。。。。

        
        stopBubbling(event); 
    }


    function stopBubbling(e) {
        e = window.event || e;
        if (e.stopPropagation) {
            e.stopPropagation();      //阻止事件 冒泡传播
        } else {
            e.cancelBubble = true;   //ie兼容
        }
    }


北京半月雨文化科技有限公司.版权所有 京ICP备12026184号-3