阅读量:0
要处理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()来阻止事件冒泡。
