码迷,mamicode.com
首页 > Web开发 > 详细

使用js冒泡实现点击空白处关闭弹窗

时间:2017-10-06 23:57:59      阅读:523      评论:0      收藏:0      [点我收藏+]

标签:script   ini   lan   void   节点   padding   font   效果   start   

  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冒泡实现点击空白处关闭弹窗

标签:script   ini   lan   void   节点   padding   font   效果   start   

原文地址:http://www.cnblogs.com/langtianya/p/7633246.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!