要處理jQuery中的事件冒泡,您可以使用event.stopPropagation()
方法。event.stopPropagation()
會阻止事件繼續向上冒泡到父元素。以下是一個簡單的示例:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Bubbling Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="parent" style="background-color: red; padding: 50px;">
Parent
<div id="child" style="background-color: blue; padding: 30px;">
Child
</div>
</div>
<script src="main.js"></script>
</body>
</html>
JavaScript (main.js):
$("#child").bind("click", function(event) {
alert("Child clicked!");
event.stopPropagation(); // 阻止事件冒泡到父元素
});
$("#parent").bind("click", function() {
alert("Parent clicked!");
});
在這個示例中,當您點擊子元素時,只會彈出"Child clicked!"消息,而不會彈出"Parent clicked!"消息,因為我們在子元素的點擊事件處理程序中調用了event.stopPropagation()
來阻止事件冒泡。