浅谈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 相关文章推荐
jQuery文本框(input textare)事件绑定方法教程
Apr 24 Javascript
利用JS进行图片的切换即特效展示图片
Dec 03 Javascript
js调试工具console.log()方法查看js代码的执行情况
Aug 08 Javascript
php利用curl获取远程图片实现方法
Oct 26 Javascript
Javascript中prototype的使用详解
Jun 18 Javascript
JavaScript实现刷新不重记的倒计时
Aug 10 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
Sep 14 Javascript
AngularJS2中一种button切换效果的实现方法(二)
Mar 27 Javascript
JavaScript实现简单的文本逐字打印效果示例
Apr 12 Javascript
JS中this的指向以及call、apply的作用
May 06 Javascript
详解如何修改 node_modules 里的文件
May 22 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
Jul 23 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获取youku视频真实flv文件地址的方法
2014/12/23 PHP
PHP设计模式之观察者模式实例
2016/02/22 PHP
php字符串操作针对负值的判断分析
2016/07/28 PHP
php的socket编程详解
2016/11/20 PHP
Laravel自定义 封装便捷返回Json数据格式的引用方法
2019/09/29 PHP
JavaScript 不只是脚本
2007/05/30 Javascript
js 获取中文拼音,Select自动匹配字母获取值的代码
2009/09/23 Javascript
ECMAScript 创建自己的js类库
2012/11/22 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
2014/07/21 Javascript
详解JavaScript的另类写法
2016/04/11 Javascript
JS实现物体带缓冲的间歇运动效果示例
2016/12/22 Javascript
NodeJS测试框架mocha入门教程
2017/03/28 NodeJs
jquery中done和then的区别(详解)
2017/12/19 jQuery
JS实现百度搜索接口及链接功能实例代码
2018/02/02 Javascript
详解vue+webpack+express中间件接口使用
2018/07/17 Javascript
vue动态子组件的两种实现方式
2019/09/01 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
2019/11/13 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
2020/07/28 Javascript
python实现批量改文件名称的方法
2015/05/25 Python
python实现爬取千万淘宝商品的方法
2015/06/30 Python
各个系统下的Python解释器相关安装方法
2015/10/12 Python
python初学之用户登录的实现过程(实例讲解)
2017/12/23 Python
python IP地址转整数
2020/11/20 Python
CSS3弹性盒模型开发笔记(三)
2016/04/26 HTML / CSS
ProBikeKit英国:在线公路自行车之家
2017/02/10 全球购物
加拿大在线眼镜零售商:SmartBuyGlasses加拿大
2019/05/25 全球购物
白俄罗斯大卖场:21vek.by
2019/07/25 全球购物
会计专业推荐信
2013/10/29 职场文书
今冬明春火灾防控工作方案
2014/05/29 职场文书
贫困证明怎么写
2015/06/16 职场文书
培训简讯范文
2015/07/20 职场文书
关于元旦的广播稿2016
2015/12/17 职场文书
TV动画《神废柴☆偶像》公布先导PV
2022/03/20 日漫
python标准库ElementTree处理xml
2022/05/20 Python
GPU服务器的多用户配置方法
2022/07/07 Servers
jdbc中自带MySQL 连接池实践示例
2022/07/23 MySQL