stopPropagation, preventDefault 和 return false 的区别

时间 2019-11-17

标签 stoppropagation preventdefault return false 区别繁體版

原文原文链接

由于有父, 子节点同在, 由于有监听事件和浏览器默认动做之分. 使用 JavaScript 时为了达到预期效果常常须要阻止事件和动做执行. 通常咱们会用到三种方法, 分别是 stopPropagation(), preventDefault() 和 return false. 它们之间有什么区别, 该什么时候使用呢? 将在本文中进行讲解.javascript

术语

监听事件, 在在节点上能被监听的页面操做. 如: select 节点的 change 事件, a 节点的 click 事件.
浏览器默认动做, 指特定页面元素上带有的功能. 如: 点击 a 连接节点的跳转动做, 表单提交动做.html

stopPropagation()

讲stopPropagation方法以前必需先给你们讲解一下js的事件代理。java

事件代理用到了两个在JavaSciprt事件中常被忽略的特性：事件冒泡以及目标元素。当一个元素上的事件被触发的时候，好比说鼠标点击了一个按钮，一样的事件将会在那个元素的全部祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。对任何一个事件来讲，其目标元素都是原始元素，在咱们的这个例子中也就是按钮。目标元素它在咱们的事件对象中以属性的形式出现。使用事件代理的话咱们能够把事件处理器添加到一个元素上，等待事件从它的子级元素里冒泡上来，而且能够很方便地判断出这个事件是从哪一个元素开始的。浏览器

stopPropagation方法就是起到阻止js事件冒泡的做用，看一段代码。this

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xHTML1/DTD/xHTML1-transitional.dtd"> 
 
<HTML XMLns="http://www.w3.org/1999/xHTML" lang="gb2312"> 
 
<head> 
 
<title> 阻止JS事件冒泡传递（cancelBubble 、stopPropagation）</title> 
 
<meta name="keywords" content="JS,事件冒泡,cancelBubble,stopPropagation" /> 
 
<script> 
 
function doSomething (obj,evt) { 
 
 alert(obj.id); 
 
 var e=(evt)?evt:window.event; 
 
 if (window.event) { 
 
  e.cancelBubble=true;// ie下阻止冒泡 
 
 } else { 
 
  //e.preventDefault(); 
 
  e.stopPropagation();// 其它浏览器下阻止冒泡 
 
 } 
 
} 
 
</script> 
 
</head> 
 
<body> 
 
<div id="parent1" onclick="alert(this.id)" style="width:250px; 
 
 <p>This is parent1 div.</p> 
 
 <div id="child1" onclick="alert(this.id)" style="width:200px; 
 
  <p>This is child1.</p> 
 
 </div> 
 
 <p>This is parent1 div.</p> 
 
</div> 
 
<br /> 
 
<div id="parent2" onclick="alert(this.id)" style="width:250px;"> 
 
 <p>This is parent2 div.</p> 
 
 <div id="child2" onclick="doSomething(this,event);" style="width:200px;"> 
 
  <p>This is child2. Will bubble.</p> 
 
 </div> 
 
 <p>This is parent2 div.</p> 
 
</div> 
 
</body> 
 
</HTML>

有时咱们但愿事件在特定节点执行完以后再也不传递, 可使用事件对象的 stopPropagation() 方法.例如如下实例：spa

假设页面上存在一个浮动弹出层, 显示在最前面, 当点击弹出层之外页面区域时, 隐藏弹出层. 为了作到这样的效果, 咱们会监听 documentElement 的 click 事件, 一旦事件被触发即隐藏弹出层. 可是....net

这显然存在问题. 当用户点击弹出层时, 咱们不但愿它隐藏掉. 但由于事件的冒泡传递, 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 便可阻止事件继续. 如:code

// 在弹出对话框上点击时, 不进行任何页面操做, 并阻止冒泡
document.getElementById('dialog').onclick = function(ev) {
	ev.cancelBubble = false;
};

preventDefault()

preventDefault方法就是能够阻止它的默认行为的发生而发生其余的事情（官方解释：该方法将通知 Web 浏览器不要执行与事件关联的默认动做（若是存在这样的动做）。例如，若是 type 属性是 "submit"，在事件传播的任意阶段能够调用任意的事件句柄，经过调用该方法，能够阻止提交表单。注意，若是 Event 对象的 cancelable 属性是 fasle，那么就没有默认动做，或者不能阻止默认动做。不管哪一种状况，调用该方法都没有做用。）htm

一个带事件监听的连接代码以下:

<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 不但阻止事件, 还能够返回对象, 跳出循环等... 方便地一刀切而不够灵活, 滥用易出错.

连接：http://cache.baiducontent.com/c?m=9f65cb4a8c8507ed4fece763105392230e54f73f6b8a87463e838448e435061e5a27a5e6656050599196293447f41400fdf040216b5537b7ed8ac81d99ecce6e79df73673742c05612a54af39d5125b760c71caeef45f0ba8666c0f09384c2401697135375c2b0dc1e57488c78f16467b4f2ca0f4b19&p=882a9546d1855afc57ef8a35570e8b&newp=9c7fc64ad4934eaf5beac639490798231610db2151d7d217&user=baidu&fm=sc&query=preventDefault&qid=d7add83a00020c1d&p1=5

　　http://www.jb51.net/article/46379.htm