JS中preventDefault与stopPropagation的区别详解

preventDefault阻止默认行为

首先明确JavaScript中preventDefault和stopPropagation两个方法的核心区别： preventDefault方法的作用是阻止元素的默认行为。以HTML中最基础的<a>标签为例，点击链接通常会跳转至href指定的URL，这属于标签的默认行为。调用preventDefault方法即可拦截该默认动作，转而执行自定义逻辑。具体实现代码如下：

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS阻止链接跳转</title>
<script type="text/javascript">
function stopDefault( e ) {
if ( e && e.preventDefault )
e.preventDefault();
else
window.event.returnValue = false;
return false;
} 
</script>
</head>
<body>
<a href="http://www.baidu.com" id="testLink">百度</a>
<script type="text/javascript">
var test = document.getElementById('testLink');
test.onclick = function(e) {
alert('我的链接地址是：' + this.href + ', 但是我不会跳转。');
stopDefault(e);
} 
</script>
</body>
</html>

运行上述代码后，点击链接不再跳转至http://www.baidu.com，而是仅弹出alert提示框。

stopPropagation与事件冒泡

关于preventDefault的讲解至此结束，接下来探讨stopPropagation方法。在介绍stopPropagation之前，有必要先理解JavaScript的事件代理机制。

事件代理依赖于两个常被忽略的特性：事件冒泡和目标元素。当按钮等元素触发事件时，该事件会沿DOM树向上传播，依次触发所有祖先元素上的同名事件，这一过程称为事件冒泡。目标元素即最初触发事件的元素，可通过事件对象的属性获取。使用事件代理时，可将事件处理器绑定到父级元素，通过监听子元素冒泡上来的事件，并判断事件来源，从而高效处理多个子元素的事件。

stopPropagation方法的作用正是阻止JavaScript的事件冒泡。具体代码示例如下：

<!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;background-color:yellow">
<p>This is parent1 div.</p>
<div id="child1" onclick="alert(this.id)" style="width:200px;background-color:orange">
<p>This is child1.</p>
</div>
<p>This is parent1 div.</p>
</div>
<br />
<div id="parent2" onclick="alert(this.id)" style="width:250px;background-color:cyan;">
<p>This is parent2 div.</p>
<div id="child2" onclick="doSomething(this,event);" style="width:200px;background-color:lightblue;">
<p>This is child2. Will bubble.</p>
</div>
<p>This is parent2 div.</p>
</div>
</body>
</HTML>

运行上述代码即可直观理解事件冒泡与阻止冒泡的效果。