JavaScript阻止事件冒泡示例分享
之前遇到事件冒泡的问题,也去网上搜索了一番,结果大部分都是一样的代码,贴来用时也不太顺利。涉及到FF时,可以用 e.stopPropagation(); ,不知怎地我没用成功。不过我发现FF支持e.cancelBubble = true;的写法,经测试可行。就把代码贴在这里吧,省得以后到处找。IE以前版本的兼容性还没测试,用到时再完善吧。
//取消事件冒泡
function stopBubble(e) {
var evt = (e) ? e : window.event;//兼容FF
evt.cancelBubble = true; //evt.stopPropagation(); FF下阻止冒泡,据说可以用
};
另:
1、cancelBubble(HTML DOM Event 对象属性) :如果事件句柄想阻止事件传播到包容对象,必须把该属性设为 true。
2、stopPropagation(HTML DOM Event 对象方法):终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后,该节点上处理该事件的处理程序将被调用,事件不再被分派到其他节点。
3、 preventDefault(HTML DOM Event 对象方法)通知浏览器不要执行与事件关联的默认动作。
例子:
function stopBubble(e)
{
if (e && e.stopPropagation)
e.stopPropagation()
else
window.event.cancelBubble=true
}
把这个stopBubble(e)函数放到你想要的阻止事件冒泡函数里面就可以阻止事件冒泡了
相关推荐
-
JS阻止事件冒泡行为和闭包的方法
阻止事件冒泡行为,要是不阻止的话,点击div的时候也会同时触发body事件 html代码 <body onclick='load()'> <div onclick='cli()'> click this </div> </body> css代码 div{ width:200px; height:200px; border:1px red solid; } js代码 function load(){ console.log('body') } function
-
js阻止冒泡及jquery阻止事件冒泡示例介绍
js阻止冒泡 在阻止冒泡的过程中,W3C和IE采用的不同的方法,那么我们必须做以下兼容. 复制代码 代码如下: function stopPro(evt){ var e = evt || window.event; //returnValue如果设置了该属性,它的值比事件句柄的返回值优先级高.把这个属性设置为 fasle, //可以取消发生事件的源元素的默认动作. //window.event?e.returnValue = false:e.preventDefault(); window.ev
-
javascript阻止事件冒泡和浏览器的默认行为
1.阻止事件冒泡,使成为捕获型事件触发机制. function stopBubble(e) { //如果提供了事件对象,则这是一个非IE浏览器 if ( e && e.stopPropagation ) //因此它支持W3C的stopPropagation()方法 e.stopPropagation(); else //否则,我们需要使用IE的方式来取消事件冒泡 window.event.cancelBubble = true; } 2.当按键后,不希望按键继续传递给如HTML文本框对象时
-
兼容各大浏览器的JavaScript阻止事件冒泡代码
这里仅仅是一个简单代码demo,因为时间问题并未做深入研究,因为今天做项目时要用到阻止事件冒泡的内容,找了好多才找到一个可以使用的,特记录之. <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>阻止事件冒泡</title> <scr
-
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
1. event.preventDefault(); -- 阻止元素的默认事件. 注:a元素的点击跳转的默认事件 , button,radio等表单元素的默认事件 , div 元素没有默认事件 例: 复制代码 代码如下: <a href="http://www.baidu.com" target="_black">百度</a> 复制代码 代码如下: var samp = document.getElementByTagName("
-
JavaScript阻止事件冒泡示例分享
之前遇到事件冒泡的问题,也去网上搜索了一番,结果大部分都是一样的代码,贴来用时也不太顺利.涉及到FF时,可以用 e.stopPropagation(); ,不知怎地我没用成功.不过我发现FF支持e.cancelBubble = true;的写法,经测试可行.就把代码贴在这里吧,省得以后到处找.IE以前版本的兼容性还没测试,用到时再完善吧. 复制代码 代码如下: //取消事件冒泡 function stopBubble(e) { var evt = (e) ? e : window.eve
-
JavaScript阻止事件冒泡的方法
我们需要注意的是:事件冒泡本身的特性,会带来的坏处,也会带来的好处,在后续的博客我会详细说明. 所以我们在这里将论述一下如何阻止事件冒泡. 比如现在有一个子盒子和一个父盒子,子盒子和父盒子二者都有点击事件,但是此时,当我们点击子盒子时,只想让子盒子显示点击事件.这里我们就要用到阻止事件冒泡的方法来隔断父盒子的事件显示. 先创建两个盒子,并给他们添加点击事件,如下所示: <!DOCTYPE html> <html lang="en"> <head> &
-
jQuery阻止事件冒泡实例分析
本文实例讲述了jQuery阻止事件冒泡.分享给大家供大家参考,具体如下: 我们在平时的开发过程中,肯定会遇到在一个div(这个div可以是元素)包裹一个div的情况,但是呢,在这两个div上都添加了事件,如果点击里面的div我们希望处理这个div的事件,但是呢,我们不希望外层的div的事件也执行,这时候我们就要用到阻止冒泡. 通俗点来说吧,你在家里看电视,躲在自己的小房间,但是你不希望声音传到隔壁父母的耳朵里,这时候,你可能躲在被窝里,或者墙壁的隔音效果很好,阻隔声音可以理解为阻止冒泡. 阻止事
-
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
本文实例讲述了jQuery事件绑定和解绑.事件冒泡与阻止事件冒泡及弹出应用.分享给大家供大家参考,具体如下: 事件的绑定和解绑 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src=&qu
-
JavaScript中事件冒泡机制示例详析
什么是冒泡? DOM事件流(event flow )存在三个阶段:事件捕获阶段. 处于目标阶段. 事件冒泡阶段. 事件捕获(event capturing):通俗的理解就是,当鼠标点击或者触发dom事件时,浏览器会从根节点开始由外到内进行事件传播,即点击了子元素,如果父元素通过事件捕获方式注册了对应的事件的话,会先触发父元素绑定的事件. 事件冒泡(dubbed bubbling):与事件捕获恰恰相反,事件冒泡顺序是由内到外进行事件传播,直到根节点. dom标准事件流的触发的先后顺序为:先捕
-
利用JQuery阻止事件冒泡
冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. 我们在平时的开发过程中,肯定会遇到在一个div(这个div可以是元素)包裹一个div的情况,但是呢,在这两个div上都添加了事件,如果点击里面的div我们希望处理这个div的事件,但是呢,我们不希望外层的div的事件也执行,这时候我们就要用到阻止冒泡. 通俗点来说吧,你在家里看电视,躲在自己的小房间,但是你不希望声音传到隔壁父母的耳朵里,这时候,你可能躲在被窝里,或者墙壁的隔音效果很好,阻隔声音可以理解为阻止冒泡. <style>
随机推荐
- javascript轻量级模板引擎juicer使用指南
- Spring集成MyBatis框架
- 微信小程序网络请求的封装与填坑之路
- js中设计一段程序,让它能够打印自己的方法收集藏
- PHP中的串行化变量和序列化对象
- Python的time模块中的常用方法整理
- 使用Python获取CPU、内存和硬盘等windowns系统信息的2个例子
- Python基础篇之初识Python必看攻略
- jsp遍历文件夹下的文件的代码
- 解析MYSQL显示表信息的方法
- 解决php-fpm.service not found问题的办法
- Java客户端调用.NET的WebService实例
- Javascript页面跳转常见实现方式汇总
- JavaScript简单遍历DOM对象所有属性的实现方法
- 浅谈Jquery为元素绑定事件
- Linux下彻底卸载mysql详解
- mysql自增ID起始值修改方法
- 浅析Java中线程的创建和启动
- jquery获得当前html页面源码的方法
- 详解javascript实现自定义事件