1.支持W3C标准的浏览器在添加事件时用addEventListener(event,fn,useCapture)方法，基中第3个参数 useCapture是一个Boolean值，用来设置事件是在事件捕获时执行，还是事件冒泡时执行。而不兼容W3C的浏览器(IE)用 attachEvent()方法，此方法没有相关设置，不过IE的事件模型默认是在事件冒泡时执行的，也就是在useCapture等于false的时候 执行，所以把在处理事件时把useCapture设置为false是比较安全，也实现兼容浏览器的效果。

W3C模型是将两者进行中和，在W3C模型中，任何事件发生时，先从顶层开始进行事件捕获，直到事件触发到达了事件源元素。然后，再从事件源往上进行事件冒泡，直到到达document。

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

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

true=捕获

false=冒泡

3.

IE浏览器
如上面所说，IE只支持事件冒泡，不支持事件捕获，它也不支持addEventListener函数，不会用第三个参数来表示是冒泡还是捕获，它提供了另一个函数attachEvent。

ele.attachEvent("onclick", doSomething2);

附：事件冒泡（的过程）：事件从发生的目标（event.srcElement||event.target）开始，沿着文档逐层向上冒泡，到document为止。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xHTML1/DTD/xHTML1-transitional.dtd">
<HTML XMLns="http://www.w3.org/1999/xHTML" lang="gb2312">
<head>
<title> 阻止JS事件冒泡传递（cancelBubble 、stopPropagation）</title>
<meta name="keywords" content="JS,事件冒泡,cancelBubble,stopPropagation" />
<script>
function doSomething (obj,evt) {
 alert(obj.id);
 var e=(evt)?evt:window.event;
 if (window.event) {
  e.cancelBubble=true;// ie下阻止冒泡
 } else {
  //e.preventDefault();
  e.stopPropagation();// 其它浏览器下阻止冒泡
 }
}
</script>
</head>
<body>
<div id="parent1" onclick="alert(this.id)" style="width:250px;
 <p>This is parent1 div.</p>
 <div id="child1" onclick="alert(this.id)" style="width:200px;
  <p>This is child1.</p>
 </div>
 <p>This is parent1 div.</p>
</div>
<br />
<div id="parent2" onclick="alert(this.id)" style="width:250px;">
 <p>This is parent2 div.</p>
 <div id="child2" onclick="doSomething(this,event);" style="width:200px;">
  <p>This is child2. Will bubble.</p>
 </div>
 <p>This is parent2 div.</p>
</div>
</body>
</HTML>

js 阻止事件捕获的更多相关文章

  1. Atitit.  Js 冒泡事件阻止 事件捕获   事件传递  事件代理

    Atitit.  Js 冒泡事件阻止 事件捕获   事件传递  事件代理   1. 事件冒泡1 2. 事件捕获1 3. 同时支持了事件捕获阶段和事件冒泡阶段ddEventListener的第三个参数1 ...

  2. js阻止浏览器、元素的默认事件与js阻止事件冒泡、阻止事件流

    嵌套的div元素,如果父级和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下js阻止默认事件与js阻止事件冒泡示例,大家参考使用吧   1. event.prev ...

  3. JS阻止事件冒泡

    在使用JS事件的时候,外层元素事件有可能被里层元素的事件触发,例如点击里层元素外层也触发了点击,这种现象称为事件冒泡.(李昌辉) <div id="wai"> < ...

  4. js阻止事件冒泡的两种方法

    1.什么是JS事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这 ...

  5. vue.js阻止事件冒泡和默认事件

    首先我们来看原生JS取消事件冒泡方法: e.stopPropagation(); //非IE浏览器window.event.cancelBubble = true; //IE浏览器 原生JS阻止默认事 ...

  6. js 阻止事件执行

    三种阻止事件执行的方式 event.preventDefault() event.stopPropagation() return false event.preventDefault() 阻止特定事 ...

  7. js 阻止事件冒泡 支持所有主流浏览器

    function getEvent(){ if(window.event) {return window.event;} func=getEvent.caller; while(func!=null) ...

  8. js阻止事件冒泡和标签默认行为

    ////阻止事件冒泡函数和 // 阻止默认浏览器动作(W3C) 要一起使用效果好<a href="/Scripts/newfiber_js_lib/images/1.jpg" ...

  9. js阻止默认事件与js阻止事件冒泡

    e.stopPropagation(); //阻止事件冒泡 功能:停止事件冒泡 function stopBubble(e) { // 如果提供了事件对象,则这是一个非IE浏览器 if ( e &am ...

随机推荐

  1. BZOJ2160 拉拉队排练【Manacher】

    Description 艾利斯顿商学院篮球队要参加一年一度的市篮球比赛了.拉拉队是篮球比赛的一个看点,好的拉拉队往往能帮助球队增加士气,赢得最终的比赛.所以作为拉拉队队长的楚雨荨同学知道,帮助篮球队训 ...

  2. SQL夯实基础（八）：联接运算符算法归类

    今天主要介绍三个常用联接运算符算法:合并联接(Merge join),哈希联接(Hash Join)和嵌套循环联接(Nested Loop Join).(mysql至8.0版本,都只支持Nested ...

  3. MySQL-Proxy 读写分离、同步延时问题解决方案

    MySQL-Proxy 读写分离.同步延时问题解决方案 使用MySQL将读写请求转接到主从Server. 一 安装MySQL Proxy MySQL Proxy的二进制版非常方便,下载解压缩后即用. ...

  4. ballerina 学习一 基本项目安装试用

    ballerina介绍    建议参考这篇文章: https://mp.weixin.qq.com/s/DqdlOhquqMaGOJf26lANPw   1. 安装 直接下载对应操作系统的二进制文件即 ...

  5. 2018-10-09 可用的前端 CDN

    2018-10-09 可用的前端 CDN 360 前端静态资源库 https://cdn.baomitu.com/ 新浪的前端 CDN http://lib.sinaapp.com/ 又拍云的前端库慢 ...

  6. bower.json 的版本范围

    bower.json 的版本范围 有小伙伴问 ~2.2.0 什么意思. 而且在git 的tags 中没有了 2.2.0 版本,怎么样? 实际上 ~2.2.0 的意思是 >=2.2.0 <2 ...

  7. 【转】VC 线程间通信的三种方式

    原文网址:http://my.oschina.net/laopiao/blog/94728 1.使用全局变量(窗体不适用)      实现线程间通信的方法有很多,常用的主要是通过全局变量.自定义消息和 ...

  8. oracle 之 手动建库

    1.-- 查看服务器 ORA 环境变量情况[oracle@orastb ~]$ env|grep ORAORACLE_BASE=/u01/app/oracleORACLE_HOME=/u01/app/ ...

  9. bzoj 1043 [HAOI2008]下落的圆盘——圆的周长

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1043 算每个圆被它后面的圆盖住了多少圆弧即可.注意判断这个圆完全被后面盖住的情况. #inc ...

  10. Cannot read property 'setState' of undefined

    You're using function() in your Promise chain, this will change the scope for this. If you're using ...