当使用 document.delegate 时，子元素的 JQuery 事件处理程序在父元素之后触发答案

【问题标题】：JQuery event handler for child element triggers after parent when document.delegate used当使用 document.delegate 时，子元素的 JQuery 事件处理程序在父元素之后触发
【发布时间】：2021-06-15 01:58:15
【问题描述】：

我使用下面的 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>

【问题讨论】：

标签： html jquery jquery-events event-bubbling jquery-delegate

【解决方案1】：

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

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

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

【讨论】：