浅谈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 相关文章推荐
js操作select控件的几种方法
Jun 02 Javascript
JS中处理时间之setUTCMinutes()方法的使用
Jun 12 Javascript
Vue实现双向数据绑定
May 03 Javascript
JavaScript实现简单的星星评分效果
May 18 Javascript
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
简单实现jquery隔行变色
Nov 09 jQuery
bootstrap里bootstrap动态加载下拉框的实例讲解
Aug 10 Javascript
详解angular应用容器化部署
Aug 14 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
Mar 09 Javascript
vue 开发企业微信整合案例分析
Dec 02 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
Jul 23 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
Oct 29 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强制下载类型的实现代码
2011/04/21 PHP
应用开发中涉及到的css和php笔记分享
2011/08/02 PHP
PHP使用SOAP调用.net的WebService数据
2013/11/12 PHP
php下foreach提示Warning:Invalid argument supplied for foreach()的解决方法
2014/11/11 PHP
PHP curl伪造IP地址和header信息代码实例
2015/04/27 PHP
php使用gzip压缩传输js和css文件的方法
2015/07/29 PHP
JavaScript使用addEventListener添加事件监听用法实例
2015/06/01 Javascript
Jquery简单分页实现方法
2015/07/24 Javascript
编写高性能Javascript代码的N条建议
2015/10/12 Javascript
深入理解js中this的用法
2016/05/28 Javascript
微信小程序 图片边框解决方法
2017/01/16 Javascript
Angularjs 与 bower安装和使用详解
2017/05/11 Javascript
详解angular2 控制视图的封装模式
2018/12/27 Javascript
vue实现倒计时获取验证码效果
2020/04/17 Javascript
Nuxt v-bind绑定img src不显示的解决
2019/12/05 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
2019/12/06 Javascript
JavaScript实现英语单词题库
2019/12/24 Javascript
[08:17]Ti9 现场cosplay
2019/09/10 DOTA
python实现微信远程控制电脑
2018/02/22 Python
python监测当前联网状态并连接的实例
2018/12/18 Python
Python scipy的二维图像卷积运算与图像模糊处理操作示例
2019/09/06 Python
Python生成验证码、计算具体日期是一年中的第几天实例代码详解
2019/10/16 Python
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
2013/06/06 HTML / CSS
Marmot土拨鼠官网:美国专业户外运动品牌
2018/01/11 全球购物
VLAN和VPN有什么区别?分别实现在OSI的第几层?
2014/12/23 面试题
Linux管理员面试题 Linux admin interview questions
2014/11/01 面试题
秘书英文求职信范文
2014/01/31 职场文书
护士毕业生自我鉴定
2014/02/08 职场文书
质量承诺书范文
2014/03/27 职场文书
企业标语口号
2014/06/10 职场文书
秋季运动会广播稿(30篇)
2014/09/13 职场文书
教师群众路线剖析材料
2014/09/29 职场文书
判缓刑人员个人思想汇报
2014/10/10 职场文书
加强机关作风建设心得体会
2014/10/22 职场文书
委托公证书格式
2015/01/26 职场文书
2015年社区卫生工作总结
2015/04/21 职场文书