参考文章：https://www.xuebuyuan.com/3208697.html
e.preventDefault() 阻止事件的默认行为
e.stopPropagation() 阻止事件冒泡
下面举例说明：
<html>
<head>
<title>测试</title>
</head>
<body>
<table>
<tr>
<td>
<span>点击测试冒泡事件</span>
</td>
</tr>
</table>
</body>
</html>
<script>
$(function() {
$("table").click(function() {
alert("你点击了table")；
});
$("td").click(function() {
alert("你点击了td");
});
$("span").click(function() {
alert("你点击了span");
});
});
</script>
当我们点击span时，就会看到浏览器弹框，且出现了3次，内容按顺序为：
①你点击了span
②你点击了td
③你点击了table
这种情况就是所谓的事件冒泡。简单说就是事件的执行顺序为从下到上，从里到外，事件依次触发
但是，有的时候我们不希望冒泡该怎么办呢？
这时候就用到了e.stopPropagation()
$(function() {
$("table").click(function() {
alert("你点击了table")；
});
$("td").click(function() {
alert("你点击了td");
});
$("span").click(function(e) {
alert("你点击了span");
e.stopPropagation();
});
});
这时候你再点击span，就会发现，浏览器只弹出了“你点击了span”
使用e.preventDefault();
<a href="http://www.baidu.com">测试默认行为<a>
$("a").click(function() {
alert("你点击了a标签");
});
你会发现当你点击a链接后，浏览器会弹框后跳转到百度首页
下面再看
$("a").click(function(e) {
alert("测试默认行为");
e.preventDefault();
});
再次点击该连接后，你会发现它只弹框，而并没有跳转
在jQuery事件中return false等效于同时调用e.preventDefault()和e.stopPropagation()，return false除了阻止默认行为之外，还会阻止事件冒泡
在jQuery的源码中可以看到：
if(ret === false) {
event.preventDefault();
event.stopPropagation();
}
e要是写在方法的（）里，可以在方法里面自定义var e = window.event || arguments.callee.caller.arguments[0];//后一种是兼容火狐的
网友评论