OnClick：区分父div和子div

Question

我目前正在一个网站上工作，但是我对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 ）时，如何防止激活父（画廊卡div ）的行为？

Answer 1

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

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

然后将DeleteRecordAction更改为以下内容：

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

顺便说一句，不是传递this.id到函数，而是传递this。然后，您无需调用getElementById()即可获取元素，只需使用参数即可。