stopPropagation 停止冒泡
preventDefault 阻止默认行为
return false 停止冒泡和阻止默认行为。
冒泡的执行顺序是由触发事件的元素往父级元素层层执行。
但是如果当前元素没有阻止默认行为，而父级元素阻止默认行为，那么默认行为也不会触发。
示例代码
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="parent" style="width: 200px;height: 200px;border: 1px solid red;padding: 10px">
<span>parent</span>
<div id="middle" style="border: 1px solid blue;padding: 10px;width: 160px;height: 100px">
<span>middle</span>
<br/>
<a href="111.html" id="self" style="margin-left: 50px;margin-top: 20px">self</a>
</div>
</div>
<label id="info">
</label>
</body>
</html>
浏览器运行后：
定义事件
1、不阻止默认行为，不阻止冒泡
<script>
$(document).ready(function(){
$("#parent").click(function(e){
console.log("parent is clicked!");
});
$("#middle").click(function(e){
console.log("middle is clicked!");
});
$("#self").click(function(e){
console.log("self is clicked!");
});
});
</script>
执行结果：
self is clicked!
middle is clicked!
parent is clicked!
打印完信息后，跳转到111.html
2、当前元素不阻止默认行为，但是父级元素阻止默认行为
<script>
$(document).ready(function(){
$("#parent").click(function(e){
e.preventDefault();
console.log("parent is clicked!");
});
$("#middle").click(function(e){
console.log("middle is clicked!");
});
$("#self").click(function(e){
console.log("self is clicked!");
});
});
</script>
执行结果：
self is clicked!
middle is clicked!
parent is clicked!
打印完信息后，不跳转（默认行为没有执行）
3、当前元素不阻止默认行为，但是阻止冒泡。父级元素仍然阻止默认行为
<script>
$(document).ready(function(){
$("#parent").click(function(e){
e.preventDefault();
console.log("parent is clicked!");
});
$("#middle").click(function(e){
console.log("middle is clicked!");
});
$("#self").click(function(e){
e.stopPropagation();
console.log("self is clicked!");
});
});
</script>
执行结果：
self is clicked!
打印完信息后，页面跳转到111.html。（说明阻止冒泡之后，父元素的阻止默认行为与当前元素没有关系了。）
时间： 2024-08-15 01:44:15