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. 在CentOS 7+ 安装Kubernetes入门(单Master)

    TL;DR; ***,***,***,重要的事情说三次.如果不会***,这篇文章就没有看下去的意义.作为一个技术人员如果不愿意折腾,很难有所作为.作为一个单纯的技术人员,最好把心思放在技术上,做到真正 ...

  2. 【译】学习JavaScript中提升、作用域、闭包的终极指南

    这似乎令人惊讶,但在我看来,理解JavaScript语言最重要和最基本的概念是理解执行上下文.通过正确学习它,你将很好地学习更多高级主题,如提升,作用域链和闭包.考虑到这一点,究竟什么是"执 ...

  3. 前端本地存储localStorage

    1.突破cookie 4K限制,一般浏览器支持5M 2.增 删 改 查 <!DOCTYPE html> <html lang="en"> <head& ...

  4. appstore跳转

    二维码跳转 https://itunes.apple.com/cn/app/id123123123 应用内跳转 this.alertCtrl.create({ title: '更新', message ...

  5. Python Web开发问题收集(二)

  6. Codeforces 1139D Steps to One dp

    Steps to One 啊, 我要死了, 这种垃圾题居然没写出来, 最后十分钟才发现错在哪. 不知道为什么我以为 对于一个数x , 除了它的因子和它的倍数都是和它互质的, 我脑子是抽了吗? 随便瞎d ...

  7. NOIP2017提高组Day1T3 逛公园 洛谷P3953 Tarjan 强连通缩点 SPFA 动态规划 最短路 拓扑序

    原文链接https://www.cnblogs.com/zhouzhendong/p/9258043.html 题目传送门 - 洛谷P3953 题目传送门 - Vijos P2030 题意 给定一个有 ...

  8. AtCoder Regular Contest 100 (ARC100) E - Or Plus Max 其他

    原文链接https://www.cnblogs.com/zhouzhendong/p/9251448.html 题目传送门 - ARC100E 题意 给定一个正整数 $n(n\leq 18)$. 然后 ...

  9. day60 pymysql

    预知扩展内容,详见地址如下(关于数据库备份和恢复) http://www.cnblogs.com/linhaifeng/articles/7525619.html 我们一般写程序都是在py文件里面,那 ...

  10. Maya cmds pymel 单位和轴向设置

    Maya cmds pymel 单位和轴向设置 import maya.cmds as cmds # 1. to make the Y-axis of the world to be the up a ...