欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

前端中如何阻止事件传播

程序员文章站 2022-04-10 19:06:23
...
这次给大家带来前端中如何阻止事件传播,前端中阻止事件传播的注意事项有哪些,下面就是实战案例,一起来看一下。

做一个小demo,点击按钮出现浮层,点击其它地方关闭浮层,写一个简单css

<style>
.wrapper{
    position:relative;
    display:inline-block;
}
.popover{
    position:absolute;
    border:1px solid red;
    left:100%;
    top:0;
    padding:10px;
    margin-left:10px;
    background:white;
    display: none;  /*默认隐藏*/
}
.popover::before{
    position:absolute;
    content:'';
    top:5px;
    right:100%;
    border:10px solid transparent;
    border-right-color:red;
}
.popover::after{
    position:absolute;
    content:'';
    top:5px;
    right:100%;
    border:10px solid transparent;
    border-right-color:white;
    margin-right:-1px;
}

</style>
<p id="wrapper" class='wrapper'>
    <button id="clickMe">点我</button>
    <p id="popover" class="popover">
        <input type="checkbox">浮层
    </p>
</p>
<script>
    clickMe.addEventListener('click',function(){
        popover.style.display = 'block';
    });
</script>

那现在我要点击页面空白地方关闭呢?该用什么方法,很容易想到监听文档,如下代码

document.addEventListener('click',function(){
    popover.stely.display = 'none';
});

但是实际上这样写了之后,按钮都失效了,怎么点都没有反应。这是为什么呢?
理解上一篇讲的捕获和冒泡事件后就很好理解这点了,可以[]()。
我们没有指定监听是在捕获还是冒泡阶段,浏览器默认是冒泡阶段,当我们点击按钮时,捕获阶段没有发生什么时候,但是冒泡阶段就不一样了,首先button上函数先触发,然后document上函数也触发了,导致准备出现的浮层又被隐藏了。
那你可能要问,button上的事件执行了没?其实这两个事件都执行了,只是时间太短,浏览器默认一起执行了,可以在里面加一个debugger,就可以看到了。

clickMe.addEventListener('click',function(){
    popover.style.display = 'block';
});

那该怎么解决呢?最简单的方法是,除了要执行popover.style.display = 'block',还要阻止事件传播

clickMe.addEventlistener('click',function(){
    popover.style.display = 'block';
});

popover.addEventListener('click',function(e){
    e.stopPropagation();
});

这里为什么添加在按钮的父元素上面呢?如果不添加在父元素上面,点击浮层的时候,浮层也会被关闭。

如果页面上有很多监听器的话,这个方法是比较浪费内存的,比较省内存的方法用JQuery 做

$(clickMe).on('click',function(){
    $(popover).show();
    $(document).one('click',function(){
        $(popover).hide();
    });
});
$(wrapper).on('click',function(e){
    e.stopPropagation();    
})

一开始不监听,只在popover`show`的时候监听一次,马上关掉,这叫做清理战场。
$(wrapper).on('click',false) 和下面的代码完全等价

$(wrapper).on('click',function(e){
    e.preventDefault();     //阻止默认事件
    e.stopPropagation();    //阻止传播
})

但是如果页面中有checkbox,你在它的父元素任何一层,包括checkbox自己,添加了组织默认事件那么这个checkbox就没办法被check

这里有个问题,如果没有阻止事件传播,向下面这样,会发生什么事情呢?

$(clickMe).on('click',function(){
    $(popover).show();
    $(document).one('click',funtion(){
        $(popover).hide();
    });
});

当然了,和之前一样,什么事情也不会发生,那当我点击按钮之后里面都发生了那些事情呢?
当我点击了按钮之后,它会做两件事情,首先把popover`show出来,然后把hide函数添加到document上面,当事件传播到document`,就会又把它给隐藏了。

可以给它添加一个setTimeout()函数来解决这个问题

$(clickMe).on('click',function(){
    $(popover).show();
    setTimeout(function(){
        $(document).one('click',function(){
            $(popover).hide();
        })
    },0)
});

setTimeout(fn,0)这个0不是马上执行,而是尽快执行,具体是在冒泡结束在执行这里的函数,也就是说,当冒泡结束后,在把监听事件添加到document上面,等待用户下次点击在执行。

总结:

  1. 同时监听buttondocument,点啥都没反应,因为两个函数都执行了,用阻止事件传播解决了,比较浪费内存

  2. 好一定的方法是用jQuery 做,点击button后在监听document,关闭了就不再监听,不阻止事件传播,点啥也没反应,两种解决方法:一种是阻止事件传播,另一种是添加一个setTimeout()函数。

相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!

推荐阅读:

React-router v4使用步骤详解

Chart.js轻量级图表库使用案例解析

Chart.js 轻量级HTML5图表绘制工具库使用步骤详解

以上就是前端中如何阻止事件传播的详细内容,更多请关注其它相关文章!