事件冒泡 :当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级,一直到window 。

html代码:

<div id="div1">
<div id="div2">
<div id="div3">
</div>
</div>
</div>
<style>
#div1{
width: 300px;
height: 200px;
background-color: red;
}
#div2{
width: 250px;
height: 150px;
background-color: green;
}
#div3{
width: 200px;
height: 100px;
background-color: blue;
}
</style>
my$("div1").onclick=function () {
console.log(this.id);
};//div3 div2 div1 my$("div2").onclick=function () {
console.log(this.id);
};//div2 div1 my$("div3").onclick=function () {
console.log(this.id);
};//div1

代码很简单,就是三个父子关系的div,然后分别加了点击事件,当我们在div3里面点击的时候,会发现弹出了一次3,接着又弹出了2,最后又弹出了1,这说明点击的时候,不仅div3的事件被触发了,它的父级div2 与div1的点击事件也触发了,这种现象就叫做冒泡。

取消事件冒泡有两种方式:

1、标准的W3C 方式:e.stopPropagation(); 这里的stopPropagation是标准的事件对象的一个方法,调用即可(谷歌和火狐支持,IE不支持)

my$("div3").onclick=function (e) {
console.log(this.id);
e.stopPropagation();
};

2、非标准的IE方式:window.event.cancelBubble=true; 这里的cancelBubble是 IE事件对象的属性,设为true就可以了(IE特有的,谷歌支持,火狐不支持)

my$("div2").onclick=function () {
console.log(this.id);
window.event.cancelBubble=true;
};

为了兼容解决事件冒泡的方式:

function stopBubble(e) {
//如果提供了事件对象,则这是一个非IE浏览器
if (e && e.stopPropagation)
//因此它支持W3C的stopPropagation()方法
e.stopPropagation();
else
//否则,我们需要使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
}
my$("div2").onclick = function (e) {
console.log(this.id);
stopBubble(e)
}; my$("div3").onclick = function (e) {
console.log(this.id);
stopBubble(e)
};

js 冒泡事件与解决冒泡事件的更多相关文章

  1. JS中事件绑定函数,事件捕获,事件冒泡

    1 事件绑定:事件与函数绑定以及怎么取消绑定 1.1 元素.onclick这种形式,如下: <div id="div1">aaa</div> <scr ...

  2. js 事件详解 冒泡

    起因:正常情况下我点击s2时是先弹出我是children,再弹出我是father,但是却出现了先弹出我是father,后弹出我是children的情况,这种情况是在和安卓app交互的h5页面中出现的, ...

  3. [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播

    -->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...

  4. 关于JS 事件冒泡和onclick,click,on()事件触发顺序

    今天在给JQgrid中的标签添加click事件的时候,发现一个问题. JQgrid的table中,点击任何位置,都会勾选点击行的checkbox,而我希望在点击我的标签的时候,不要勾选checkbox ...

  5. js区分鼠标单双击 阻止事件冒泡

    function clickOrDblClick(obj) { count++; if (obj != undefined) { var rowStr = $.trim($(obj).find(&qu ...

  6. js事件捕获,事件冒泡,事件委托以及DOM事件流

    一:DOM事件流: 事件流是从页面接收事件的顺序,DOM2级事件规定事件流包括三个阶段: ①事件捕获阶段:用意在于事件达到目标之前捕获它,在事件捕获阶段事件流模型:document→html→body ...

  7. js 事件监听 冒泡事件

    js 事件监听  冒泡事件   的取消 [自己写框架时,才有可能用到] <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitiona ...

  8. js中addEventListener第三个参数涉及到的事件捕获与冒泡

    js中,我们可以给一个dom对象添加监听事件,函数就是 addEventListener("click",function(){},true); 很容易理解,第一个参数是事件类型, ...

  9. JS Event事件流(冒泡机制、捕获机制、事件绑定)

    1.事件流 事件流:从页面中接收事件的顺序.也就是说当一个事件产生时,这个事件的传播过程,就是事件流. IE的事件流 IE中的事件流叫事件冒泡:事件冒泡:事件开始时由最具体的元素接收,然后逐级向上传播 ...

随机推荐

  1. latex中如何引用公式

    在使用latex编辑文章时,经常会需要引用公式.图表等等. 如果我们人为地对这些公式.图表进行编号1-2-3-4,然后在文章中使用Eq(1)-Eq(2)-Eq(3)-Eq(4)去引用这些公式,固然是可 ...

  2. GIT常用命令以及作用【备忘】

    git commit  提交一个修改 git branch branchName  新建一个branchName的分支 git merge branchName 将当前分支与branchName分支合 ...

  3. SpringBoot24 SpringDataJPA环境搭建、实体类注解、关联查询

    1 版本说明 JDK:1.8 MAVEN:3.5 SpringBoot:2.0.4 IDEA:旗舰版207.2 MySQL:5.5 2 SpringDataJPA环境搭建(SpringBoot版本) ...

  4. Lambda03 方法引用、类型判断、变量引用

    1 方法引用 1.1 方法引用的好处 方法引用结合 Lambda 可以引用已存在的方法,省略很多编码,而且可读性更强,它可以自动装配参数与返回值. 在编写lambda表达式的时候可以通过方法引用的方式 ...

  5. Navicat 连接阿里云的 MySQL

    1 利用Navicat连接阿里云服务器中MySQL 常规连接方式常用于连接本机数据库以及虚拟机中的数据库:但是连接阿里云的MySQL数据库时会出现连接不上的情况,错误信息如下: 1.1 常规中的配置 ...

  6. 【转】http 缓存

    原文地址:https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-c ...

  7. 5-有道爬虫demo(post)

    爬取有道页面,实现中文翻译成英文: #_*_ coding: utf-8 _*_ ''' Created on 2018-7-12 @author: sss 功能:爬取有道翻译 ''' import ...

  8. Ubuntu 查看软件版本

    Boost dpkg -S /usr/include/boost/version.hpp OpenCV pkg-config --modversion opencv

  9. 为什么rand和srand总是同时出现?

    如果没有srand,那么rand在我电脑上运行每次返回的随机数是一样的.如果如果先调用srand,而且srand的参数不一样,那么最后产生的随机数就会不一样?那怎么然srand的参数是不一样的呢? 是 ...

  10. jQuery提供的存储接口

    jQuery.data( element, key, value ) //静态接口,存数据jQuery.data( element, key ) //静态接口,取数据 .data( key, valu ...