因为有父, 子节点同在, 因为有监听事件和浏览器默认动作之分. 使用 JavaScript 时为了达到预期效果经常需要阻止事件和动作执行. 一般我们会用到三种方法, 分别是 stopPropagation()
, preventDefault()
和 return false
. 它们之间有什么区别, 该何时使用呢? 将在本文中进行讲解.
术语
监听事件, 在在节点上能被监听的页面操作. 如: select 节点的 change 事件, a 节点的 click 事件.
浏览器默认动作, 指特定页面元素上带有的功能. 如: 点击 a 链接节点的跳转动作, 表单提交动作.
stopPropagation()
因为事件可以在各层级的节点中传递, 不管是冒泡还是捕获, 有时我们希望事件在特定节点执行完之后不再传递, 可以使用事件对象的 stopPropagation()
方法.
假设页面上存在一个浮动弹出层, 显示在最前面, 当点击弹出层以外页面区域时, 隐藏弹出层. 为了做到这样的效果, 我们会监听 documentElement
的 click 事件, 一旦事件被触发即隐藏弹出层. 但是...
这显然存在问题. 当用户点击弹出层时, 我们不希望它隐藏掉. 但因为事件的冒泡传递, documentElement
的 click 事件也会被触发. 这个时候, 我们可以监听弹出层的 click 事件, 并使用 stopPropagation()
方法阻止冒泡. 请参考下面的代码.
// 在弹出对话框上点击时, 不进行任何页面操作, 并阻止冒泡
document.getElementById('dialog').onclick = function(ev) {
ev.stopPropagation();
};
// 在 documentElement 节点上监听到点击事件时, 隐藏对话框
document.documentElement.onclick = function(ev) {
document.getElementById('dialog').style.display = 'none';
};
stopPropagation()
相当好用, 可是 IE8 及以前版本都不支持. IE 的事件对象包含特有的属性 cancelBubble
, 只要将它赋值为 false 即可阻止事件继续. 如:
// 在弹出对话框上点击时, 不进行任何页面操作, 并阻止冒泡
document.getElementById('dialog').onclick = function(ev) {
ev.cancelBubble = false;
};
preventDefault()
一个带事件监听的链接代码如下:
<a href="http://w3c.org" onclick="alert('JavaScript Click Event');">点击链接</a>
点击该链接, 显示对话框后跳转页面. 由此可知, 除了执行监听事件还会触发浏览器默认动作; 执行监听事件在前, 触发浏览器默认动作在后.
这里有个经典示例, 我们希望点击链接在新窗口打开页面, 但不希望当前页面跳转. 这个时候可以使用 preventDefault()
阻止后面将要执行的浏览器默认动作.
<a id="link" href="http://w3c.org">W3C 首页链接</a>
<script>
// 在新窗口, 打开页面
document.getElementById('link').onclick = function(ev) {
// 阻止浏览器默认动作 (页面跳转)
ev.preventDefault();
// 在新窗口打开页面
window.open(this.href);
};
</script>
return false
退出执行, return false
之后的所有触发事件和动作都不会被执行. 有时候 return false
可以用来替代stopPropagation()
和 preventDefault()
, 比如我们上面新窗口打开链接的例子, 如:
<a id="link" href="http://w3c.org">W3C 首页链接</a>
<script>
// 在新窗口, 打开页面
document.getElementById('link').onclick = function(ev) {
// 在新窗口打开页面
window.open(this.href);
// 退出执行 (在监听事件之后执行的浏览器默认动作将不会被执行)
return false;
};
</script>
有人认为 return false
= stopPropagation()
+ preventDefault()
, 其实是错的. return false
不但阻止事件, 还可以返回对象, 跳出循环等... 方便地一刀切而不够灵活, 滥用易出错.
后话
因为习惯用 return false
来阻止事件, 最近在搞手机 Web 的时候遇到一些问题, 很是难堪. 写下此文当作笔记, 提醒自己.
转自:http://www.neoease.com/stoppropagation-and-preventdefault-and-return-false/
分享到:
相关推荐
preventDefault stopPropagation 详解,很有用的
首先讲解一下js中preventDefault和stopPropagation两个方法的区别:preventDefault方法的起什么作用呢?我们知道比如百度,这是html中最基础的东西,起的作用就是点击百度链接到http://www.baidu.com,这是属于标签的...
cancelBubble用于ie的阻止冒泡事件,event.stopPropagation()用于firefox和chrome等其他浏览器的疑惑介绍。
代码如下: $(“#div1”).mousedown(function(event){ return false; }); 但是这两种方式是有区别的。return false 不仅阻止了事件往上冒泡,而且阻止了事件本身。 event.stopPropagation() 则只阻止事件往上冒泡,...
主要介绍了JavaScript中使用stopPropagation函数停止事件传播例子,即阻止事件冒泡的一个方法,需要的朋友可以参考下
帮朋友写了一个小效果,单击标签后标签变色并添加一个叉的图片,点击叉标签恢复原样,具体效果请点击下面的result
对象.attachEvent() e.returnValue=false; retrun false; 五、常见事件 右键事件:oncontextmenu 键盘事件:onkeydown onkeyup onkeypress 键盘事件的属性: key 在IE中不支持 键名称 keyCode 键码 滚轮事件: ...
阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)
前提:项目中开始绑定document click事件, 在document子类的一个a标签也绑定了click时间, 想要实现效果,就是click事件触发完成后 document事件不触发。即组织事件冒泡,加了阻止...解决:在方法后面加return false;
js阻止冒泡事件的方法有2种。 事件冒泡:当一个元素上的事件被触发时,同样的事件会在那个元素的所有祖先元素中被触发。...直接在事件调用的函数末尾添加return false; 2.event.stopPropagation()写在事件函数的开始。
无论是return false 还是event.stopPropagation();都无效。 此时需要通过用VUE提供了事件修饰符来处理,比如阻止事件冒泡@click.stop=’xx()’ .stop .prevent .capture .self .once <a></a> <!
ng停止传播指令以阻止事件从当前元素传播到他的祖先(也称为“冒泡”)安装通过凉亭安装bower install --save ng-stoppropagation用法将其添加为应用程序的依赖项,然后在HTML文件中使用ng-tricks.ng-...
return false; } 第二步: 在 touchStart函数处即_start()处必须加入: 复制代码 代码如下:if (e.target.tagName != “SELECT”) { e.preventDefault(); e.stopPropagation(); } 其实就两步,挺简单的...
取消浏览器对事件的默认行为(响应)(比如标签的跳转等)并停止... } else { evt.returnValue = false; evt.cancelBubble = true; } } 只阻止事件继续传播(不取消默认行为) 代码如下: function stopEvent (evt) {
window.event.returnValue = false; return false; }, ........................... ........................... 可编辑表格用法示例: var buttons = BaseJs.getByTagName("img"); for (var i=0;i;i++)...
方式一:在事件的回调函数中加上return false; 方式二:在事件回调函数的形参列表中添加event,然后在回调函数中调用event.stopPropagation();. 事件的默认行为 什么是事件的默认行为? 就是像a标签那样,没有...