浅谈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 相关文章推荐
Extjs学习笔记之九 数据模型(上)
Jan 11 Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
Aug 29 Javascript
JS实现一键回顶功能示例代码
Oct 28 Javascript
jquery通过a标签删除table中的一行的代码
Dec 02 Javascript
Egret引擎开发指南之创建项目
Sep 03 Javascript
jQuery浏览器CSS3特写兼容实例
Jan 19 Javascript
每天一篇javascript学习小结(String对象)
Nov 18 Javascript
实例讲解JavaScript中的this指向错误解决方法
Jun 13 Javascript
微信小程序 input输入框详解及简单实例
Jan 10 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
Jan 23 Javascript
React实现全局组件的Toast轻提示效果
Sep 21 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
Aug 07 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 神盾解密工具
2014/06/08 PHP
分享一个php 的异常处理程序
2014/06/22 PHP
将PHP的session数据存储到数据库中的代码实例
2016/06/24 PHP
浅谈mysql_query()函数的返回值问题
2016/09/05 PHP
jQuery源码分析-01总体架构分析
2011/11/14 Javascript
SeaJS入门教程系列之使用SeaJS(二)
2014/03/03 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
2014/10/10 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
2015/09/27 Javascript
js实现无缝循环滚动
2020/06/23 Javascript
Web打印解决方案之普通报表打印功能
2016/08/29 Javascript
vue.js学习笔记:如何加载本地json文件
2017/01/17 Javascript
创建一般js对象的几种方式
2017/01/19 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
2017/07/17 Javascript
JavaScript中的return布尔值的用法和原理解析
2017/08/14 Javascript
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
2018/05/16 Javascript
layui点击按钮添加可编辑的一行方法
2018/08/15 Javascript
微信小程序错误this.setData报错及解决过程
2019/09/18 Javascript
JavaScript将数组转换为链表的方法
2020/02/16 Javascript
使用Vue实现简单计算器
2020/02/25 Javascript
利用Vue实现简易播放器的完整代码
2020/12/30 Vue.js
Python函数嵌套实例
2014/09/23 Python
Python的__builtin__模块中的一些要点知识
2015/05/02 Python
Python使用pylab库实现绘制直方图功能示例
2018/06/01 Python
python合并已经存在的sheet数据到新sheet的方法
2018/12/11 Python
Django 请求Request的具体使用方法
2019/11/11 Python
浅谈python处理json和redis hash的坑
2020/07/16 Python
Python configparser模块封装及构造配置文件
2020/08/07 Python
Python 多线程C段扫描、检测 Ping扫描脚本的实现
2020/09/03 Python
借款协议书
2014/04/12 职场文书
大学生党员承诺书
2014/05/20 职场文书
绿色环保口号
2014/06/12 职场文书
学生会竞选演讲稿学习部
2014/08/25 职场文书
晋江市委常委班子四风问题整改工作方案
2014/10/26 职场文书
2014年生产部工作总结
2014/12/17 职场文书
化验室安全管理制度
2015/08/06 职场文书
SQL Server使用导出向导功能
2022/04/08 SQL Server