0

我使用下面的 html 代码来检查事件冒泡是如何工作的。我使用$(document).delegate为子元素添加了事件处理程序，对于父元素和超级元素，我使用 HTML 事件属性来处理点击事件。通常，当单击子元素时，事件应该从子元素到父元素之间冒泡。因为我使用委托在子元素中添加事件。当我单击子元素时，子警报在父元素和超级元素被触发后最后触发。

任何人都可以帮助如何让孩子首先使用 $documet.delegate 触发

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).delegate("#child", 'click', clickHandler);
function Superclick(event){
alert ("super");
}
function Parentclick(event){
    alert ("parent");
}
function clickHandler(e){
 alert("child");
}
</script>
</head>
<body>
<div style="width:500px;height:500px;background-color:red" id="super" onclick="Superclick(event)">
<div style="width:300px;height:300px;background-color:green" id="parent" onclick="Parentclick(event)">
<div style="width:250px; height:250px; background-color:yellow" id="child">
</div>
</div>
</div>
</body>
</html>
4

1 回答 1

1

在这种情况下，您无法阻止最后调用的子事件，因为这就是事件委托的具体工作方式。它依赖于从事件目标到绑定委托处理程序的父级通过 DOM 冒泡的事件。

另请注意，delegate()已弃用。您应该on()改用，但在此示例中它不会产生影响。

您可以使用一些变通方法来使用单个委托事件处理程序中的 DOM 遍历从子元素中检索必要的父元素，但是如何完成以及它具有的任何好处取决于您的特定用例。

于 2021-03-17T17:37:03.830 回答