1. 什么是事件冒泡?

如图:在一个对象上触发某类事件(比如单击onclick事件),这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。自下而上的去触发事件。

  1. 事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件。

  1. html结构

<div
class="screen"
id="parent">

<div
class="layer-screen">

<div
class="screen-content">

<a
class="filter-tag"
href="void(0);">点击a标签a>

div>

div>

div>

4.Script

<script>

$(function(){

document.getElementById("parent").addEventListener("click",function(e){

alert("我是最外层");

});

$(".layer-screen").click(function(e){

alert("我是中间层");

});

$("a").click(function(e){

alert("我是a标签");

});

});

script>

5.执行结果

a)
点击a标签,弹出:我是a标签 → 我是中间层 →
我是最外层

b)
点击中间层,弹出:我是中间层 →
我是最外层

c)
点击最外层,弹出:我是最外层

6.通过阻止事件冒泡实现点击空白处关闭弹窗

id=”parent”层作为屏蔽层,class="layer-screen"作为弹出层,给id=”parent”即最外层添加关闭弹窗的方法,给中间层和a标签绑定click事件,通过event.stopPropagation()停止事件的冒泡传递。

可以自己选择绑定事件时采用事件捕获还是事件冒泡,方法就是绑定事件时通过addEventListener函数,它有三个参数,第三个参数若是true,则表示采用事件捕获,若是false,则表示采用事件冒泡。默认为冒泡。

ele.addEventListener('click',doSomething2,true)

7.阻止事件冒泡后的function

示例:

//阻止事件冒泡

$("a").click(function(e){

alert("我是a标签");

e.stopPropagation();

});

8.执行结果

a)
点击a标签,弹出:我是a标签

b)
点击中间层,弹出:我是中间层

c)
点击最外层,弹出:我是最外层

9.在id=”parent”层的绑定事件中添加关闭弹窗的方法即可。

10.事件捕获的测试

给a标签设置id=”a”,给中间层设置id=“center”,修改参数为true

document.getElementById("parent").addEventListener("click",function(){

alert("我是最外层");

},true)

document.getElementById("center").addEventListener("click",function(){

alert("我是中间层");

},true)

document.getElementById("a").addEventListener("click",function(){

alert("我是a标签");

},true)

执行结果:

点击a标签,弹出:
我是最外层 → 我是中间层 → 我是a标签

即与事件捕获的执行顺序相反。

(将所有的点击事件参数都改为true才会出现该效果)

使用js冒泡实现点击空白处关闭弹窗的更多相关文章

  1. 【vue】vue +element 搭建项目,点击空白处关闭弹窗

    <template> <div class="step2"> <el-button @click="togglePanel($event)& ...

  2. jqeury点击空白关闭弹窗

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 温故而知新 js 点击空白处关闭气泡

    诀窍1:使用el.contains(e) 来判断点击的区域诀窍2:使用mouseup 诀窍3:完成之后,移除事件 showpopover (e) { this.popover = !this.popo ...

  4. 关于点击空白关闭弹窗的js写法推荐?

    $(document).mouseup(function(e){ var _con = $(' 目标区域 '); // 设置目标区域 ){ // Mark 1 some code... // 功能代码 ...

  5. js 冒泡事件 点击任意地方隐藏元素

    $(function () { $("#but").click(function (e) {// $();//显示速度 /*阻止冒泡事件*/ e = window.event || ...

  6. 关于点击空白关闭弹窗的js写法推荐

    $(document).mouseup(function(e){ var _con = $(' 目标区域 '); // 设置目标区域 if(!_con.is(e.target) && ...

  7. bootstrap禁用点击空白处关闭模态框

    原博主地址:http://www.cnblogs.com/godlovelian/p/4530342.html

  8. vue 点击按钮弹窗,点击关闭按钮关闭弹窗。

    <div @click="btnfc()">点击弹窗按钮</div> <div v-show="show"> <div ...

  9. js点击空白处触发事件

    我们经常会出现点击空白处关闭弹出框或触发事件 <div class="aa" style="width: 200px;height: 200px;backgroun ...

随机推荐

  1. la4394

    题解: 首先区间dp是比较好想到的 然后我感觉接下来就是乱搞... 我们会发现接下来的操作 无非就是 用一种颜色去覆盖这整个区间 然后在做 于是我用了比较暴力的做法,f[i][j][k]表示i-j这段 ...

  2. 【Arduino】Arduino接收字符串

    [Arduino]Arduino接收字符串 相关文章 [Arduino]开发入门[十]Arduino蓝牙模块与Android实现通信 在[Arduino]开发入门[十]Arduino蓝牙模块与Andr ...

  3. python全栈开发day67--字段类型、字段属性、ORM回顾

    一.回顾总结 https://www.cnblogs.com/maple-shaw/articles/9323320.html 1. 视图 1. CBV 和 FBV from django.views ...

  4. ubuntu系统安装mysql登陆提示 解决Mysql ERROR 1045 (28000): Access denied for user 'root'@'localhost'问题

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAqoAAABtCAIAAADmldQYAAAe/0lEQVR4nO1dveslR3btzJGFk02GmU

  5. tomcat配置调优与安全总结

    http://vekergu.blog.51cto.com/9966832/1672931 tomcat配置调优与安全总结 作为运维,避免不了与tomcat打交道,然而作者发现网络上关于tomcat配 ...

  6. Python之抽象类、抽象方法

    抽象类中只能有抽象方法,子类继承抽象类时,不能通过实例化使用其抽象方法,必须实现该方法. Python2 class CopyBase(object): def save(self): raise N ...

  7. HDFS常用API(1)

    一.HDFS集群API所需要jar包的maven配置信息 <dependency> <groupId>org.apache.hadoop</groupId> < ...

  8. linux硬盘挂载-新硬盘挂载和扩容硬盘挂载

    这里对当前我实际操作后的两种硬盘挂载进行整理: 第1种是直接添加一块新硬盘,然后进行挂载. 第2种是对硬盘进行扩容后,对扩容后的空间进行分区再进行挂载. [内容为参考网上资料,再加自已实际操作情况进行 ...

  9. go get 无反应、访问github.com速度慢、没反应问题的解决方案

    go get 无反应.访问github.com速度慢.没反应问题的解决方案     昨天晚上装了个虚拟机,Centos7 安装都正常,网络访问也正常,但是打算安装beego的时候,把我给噎着了,无论是 ...

  10. poj 3067 Japan 【树状数组】

    <题目链接> 题目大意: 有两个点集,这两个点集从上至下分别从1~n,1~m编号,现在给出n组数据,(x,y),表示左边点集编号为x的点与右边点集编号为y的点相连,现在要求计算这些线段的交 ...