时间戳

首页 > 解决方案 > OnClick：区分父 div 和子 div

jquery - OnClick：区分父 div 和子 div

问题描述

我目前在一个网站上工作，但我对 HTML 和 JQuery 完全陌生。

我目前有以下网站：原型前端

这是使用 JQuery 动态生成的 HTML 代码：

<div class="gallery-card" id="SOME_ID" onclick="ViewSelected(this.id)" style="background-color: rgb(206, 20, 186);">
  <strong class="StrongClass">Carlos Ba</strong>
  <button class="Gallery-Button" onclick="TakeToCardInfo(this.id)" id="SOME_ID">See More..</button>
  <div class="circle" onclick="DeleteRecordAction(this.id)" id="SOME_ID">
    <span class="glyphicon glyphicon-remove icon-sizeB"></span>
  </div>
</div>

我想要的功能是，当用户单击画廊卡 div（即带有名称的正方形）时，用户会看到所选画廊卡的详细信息，并且当用户单击带有 x 的圆圈时，相应的画廊-卡被删除。目前，此功能正在部分发挥作用。每当我单击画廊卡 div的任何部分时，都会显示正确选择的画廊卡信息，但是当我单击带有 x 的圆圈时，它不会简单地删除记录，它还会尝试显示已删除的记录。我该如何防止这种情况？当用户单击子元素 ( div class="Circle ) 时，如何防止父 ( Gallery-card div ) 的行为被激活？

标签： jqueryhtmlonclick

解决方案

将事件对象传递给函数，并调用event.stopPropagation()以防止事件冒泡到容器中。

onclick="DeleteRecordAction(this.id, event)"

并更改DeleteRecordAction为：

function DeleteRecordAction(id, event) {
    event.stopPropagation();
    // rest of code
}

顺便说一句，而不是传递this.id给函数，只需传递this. 然后你不需要调用getElementById()来取回元素，你可以使用参数。

推荐阅读