浅谈javascript事件取消和阻止冒泡


Posted in Javascript onMay 26, 2015

取消默认操作

w3c的方法是e.preventDefault(),IE则是使用e.returnValue = false;

在支持addEventListener()的浏览器中,也能通过调用时间对象的preventDefault()方法取消时间的默认操作。不过,在IE9之前的IE中,可以通过设置事件对象的returnValue属性为false来达到同样的效果。下面的代码假设一个事件处理程序,它使用全部的三种取消技术:

function cancelHandler(event){
  var event = event || window.event;  //用于IE
  if(event.preventDefault) event.preventDefault();  //标准技术
  if(event.returnValue) event.returnValue = false;  //IE
  return false;   //用于处理使用对象属性注册的处理程序
}

当前的DOM事件模型草案定义了Event对象属性defaultPrevented。

return false

javascript的return false只会阻止默认行为,而是用jQuery的话则既阻止默认行为又防止对象冒泡。

下面这个使用原生JS,只会阻止默认行为,不会停止冒泡

<div id='div'  onclick='alert("div");'>
<ul  onclick='alert("ul");'>


<li id='ul-a' onclick='alert("li");'><a href="http://caibaojian.com/"id="testB">caibaojian.com</a></li>

</ul>

</div>

var a = document.getElementById("testB");

a.onclick = function(){

return false;

};

阻止冒泡

w3c的方法是e.stopPropagation(),IE则是使用e.cancelBubble = true

在支持addEventListener()的浏览器中,可以调用事件对象的一个stopPropagation()方法已阻止事件的继续传播。如果在同一对象上定义了其他处理程序,剩下的处理程序将依旧被调用,但调用stopPropagation()方法可以在事件传播期间的任何时间调用,它能工作在捕获阶段、事件目标本身中和冒泡阶段。

IE9之前的IE不支持stopPropagation()方法。相反,IE事件对象有一个cancleBubble属性,设置这个属性为true能阻止事件进一步传播。(IE8及之前版本不支持事件传播的捕获阶段,所以冒泡是唯一待取消的事件传播。)

当前的DOM事件规范草案在Event对象上定义了另一个方法,命名为stopImmediatePropagation()。类似stopPropagation(),这个方法组织了任何其他对象的事件传播,但也阻止了在相同对象上注册的任何其他事件处理程序的调用。

<div id='div' onclick='alert("div");'>
<ul onclick='alert("ul");'>


<li onclick='alert("li");'>test</li>

</ul>

</div>

阻止冒泡

function stopHandler(event)

    window.event?window.event.cancelBubble=true:event.stopPropagation();

}

以上所述上就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
Javascript 圆角div的实现代码
Oct 15 Javascript
JavaScript Event学习第七章 事件属性
Feb 07 Javascript
页面图片浮动左右滑动效果的简单实现案例
Feb 10 Javascript
JavaScript调试技巧之console.log()详解
Mar 19 Javascript
用js模拟struts2的多action调用示例
May 19 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
Jun 27 Javascript
封装好的一个万能检测表单的方法
Jan 21 Javascript
原生JavaScript实现的简单放大镜效果示例
Feb 07 Javascript
vue将时间戳转换成自定义时间格式的方法
Mar 02 Javascript
基于vue-router 多级路由redirect 重定向的问题
Sep 03 Javascript
0基础学习前端开发的一些建议
Jul 14 Javascript
微信小程序实现签到弹窗动画
Sep 21 Javascript
javascript事件冒泡和事件捕获详解
May 26 #Javascript
解析javascript中鼠标滚轮事件
May 26 #Javascript
JS中字符串trim()使用示例
May 26 #Javascript
JSON字符串和对象之间的转换详解
May 26 #Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
May 25 #Javascript
Javascript实现飞动广告效果的方法
May 25 #Javascript
javascript自定义右键弹出菜单实现方法
May 25 #Javascript
You might like
php设计模式 Factory(工厂模式)
2011/06/26 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
最新优化收藏到网摘代码(digg,diigo)
2007/02/07 Javascript
[原创]后缀就扩展名为js的文件是什么文件
2007/12/06 Javascript
基于jquery的划词搜索实现(备忘)
2010/09/14 Javascript
Jquery数独游戏解析(一)-页面布局
2010/11/05 Javascript
jQuery实现页面滚动时层智能浮动定位实例探讨
2013/03/29 Javascript
javaScript 动态访问JSon元素示例代码
2013/08/30 Javascript
JSON相关知识汇总
2015/07/03 Javascript
jquery基础知识第一讲之认识jquery
2016/03/17 Javascript
BootStrap扔进Django里的方法详解
2016/05/13 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
2017/10/12 Javascript
一文快速详解前端框架 Vue 最强大的功能
2019/05/21 Javascript
小程序选项卡以及swiper套用(跨页面)
2020/06/19 Javascript
[27:02]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第三场
2014/05/24 DOTA
使用Python实现简单的服务器功能
2017/08/25 Python
对Python subprocess.Popen子进程管道阻塞详解
2018/10/29 Python
python 获取一个值在某个区间的指定倍数的值方法
2018/11/12 Python
python itchat实现调用微信接口的第三方模块方法
2019/06/11 Python
pytorch快速搭建神经网络_Sequential操作
2020/06/17 Python
Python和Bash结合在一起的方法
2020/11/13 Python
css3使网页、图片变成灰色兼容大多数浏览器
2014/07/02 HTML / CSS
canvas实现图片镜像翻转的2种方式
2020/07/22 HTML / CSS
Myprotein瑞典官方网站:畅销欧洲英国运动营养品牌
2018/01/22 全球购物
Pretty Green美国:英式摇滚服饰风格代表品牌之一
2019/01/23 全球购物
澳大利亚商务邀请函
2014/01/17 职场文书
本科毕业生求职自荐信
2014/02/03 职场文书
客户接待方案
2014/02/26 职场文书
打造高效课堂实施方案
2014/03/22 职场文书
就业协议书范本
2014/10/08 职场文书
刑事辩护授权委托书范本
2014/10/17 职场文书
离婚财产分配协议书
2014/10/21 职场文书
党员贯彻十八大精神思想汇报范文
2014/10/25 职场文书
教师个人考察材料
2014/12/16 职场文书
2015年学校医务室工作总结
2015/07/20 职场文书
MySQL索引篇之千万级数据实战测试
2021/04/05 MySQL