js 阻止事件捕获
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 阻止事件捕获的更多相关文章
- Atitit. Js 冒泡事件阻止 事件捕获 事件传递 事件代理
Atitit. Js 冒泡事件阻止 事件捕获 事件传递 事件代理 1. 事件冒泡1 2. 事件捕获1 3. 同时支持了事件捕获阶段和事件冒泡阶段ddEventListener的第三个参数1 ...
- js阻止浏览器、元素的默认事件与js阻止事件冒泡、阻止事件流
嵌套的div元素,如果父级和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下js阻止默认事件与js阻止事件冒泡示例,大家参考使用吧 1. event.prev ...
- JS阻止事件冒泡
在使用JS事件的时候,外层元素事件有可能被里层元素的事件触发,例如点击里层元素外层也触发了点击,这种现象称为事件冒泡.(李昌辉) <div id="wai"> < ...
- js阻止事件冒泡的两种方法
1.什么是JS事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这 ...
- vue.js阻止事件冒泡和默认事件
首先我们来看原生JS取消事件冒泡方法: e.stopPropagation(); //非IE浏览器window.event.cancelBubble = true; //IE浏览器 原生JS阻止默认事 ...
- js 阻止事件执行
三种阻止事件执行的方式 event.preventDefault() event.stopPropagation() return false event.preventDefault() 阻止特定事 ...
- js 阻止事件冒泡 支持所有主流浏览器
function getEvent(){ if(window.event) {return window.event;} func=getEvent.caller; while(func!=null) ...
- js阻止事件冒泡和标签默认行为
////阻止事件冒泡函数和 // 阻止默认浏览器动作(W3C) 要一起使用效果好<a href="/Scripts/newfiber_js_lib/images/1.jpg" ...
- js阻止默认事件与js阻止事件冒泡
e.stopPropagation(); //阻止事件冒泡 功能:停止事件冒泡 function stopBubble(e) { // 如果提供了事件对象,则这是一个非IE浏览器 if ( e &am ...
随机推荐
- 快速学习MD5的方法
MD5加密的Java实现 在各种应用系统中,如果需要设置账户,那么就会涉及到存储用户账户信息的问题,为了保证所存储账户信息的安全,通常会采用MD5加密的方式来,进行存储.首先,简单得介绍一下,什么是M ...
- hdfs会出现的一些问题
实训的第一篇博客献给坑了我的hdfs…… 由于电脑的原因,突然花屏,虚拟机来不及挂起.之后发现50070端口进不去,查看jps进程发现没有namenode 先用stop-all.sh命令再start还 ...
- 在VS2013创建WebService并在IIS中发布和使用
创建WebService 第一步:打开VS2013,新建空项目,注意选择.NET Framework的版本.这里我选择的是.NET Framework 4 新建好项目后,在项目中添加一个WebServ ...
- oracle数据库存储过程分页
CREATE OR REPLACE PROCEDURE prc_query (p_tableName in varchar2, --表名 p_columnNames in varchar2, --字段 ...
- scrapy docker 基本部署使用
1. 简单项目 pip install scrapy scrapy startproject appdemo 2. 项目代码 a. 项目代码结构 ├── Dockerfile ├── READ ...
- php基础语法(数据类型、运算符)
数据类型 标量类型: int, float, string, bool 复合类型: array, object 特殊类型: null, resouce 整数类型int, integer 字符串类型st ...
- video4linux(v4l)使用摄像头的实例基础教程与体会(转)
1. video4linux基础相关 1.1 v4l的介绍与一些基础知识的介绍 I.首先说明一下video4linux(v4l). 它是一些视频系统.视频软件.音频软 ...
- kafka--通过python操作topic
修改 topic 的分区数 shiyanlou:bin/ $ ./kafka-topics.sh --zookeeper localhost:2181 --alter --topic mySendTo ...
- 引用 LPSTR、LPCSTR、LPTSTR、LPCTSTR、LPWSTR及LPCWSTR的意义及区别
1.ANSI(即MBCS):为多字节字符集,它是不定长表示世界文字的编码方式.ANSI表示英文字母时就和ASCII一样,但表示其他文字时就需要用多字节. 2.Unicode:用两个字节表示一个字符 ...
- GOF23设计模式之享元模式(flyweight)
一.享元模式概述 内存属于稀缺资源,不要随便浪费.如果有很多个完全相同或相似的对象,可以通过享元模式,节省内存. 享元模式核心: (1)享元模式可以共享的.方式高效的支持大量细粒度对象的重用: (2) ...