javascript - 为点击事件分离 DOM 元素

Question

我有一个显示搜索结果的网站。结果与整个项目的标题信息一起显示。每个搜索结果的 html 如下所示：

<article class="search_result" onclick="location.href='#';" style="cursor: pointer;">

// Search result data

</article>

如您所见，我已经做到了，以便您可以单击任意位置并更详细地访问结果

但是，在搜索结果中，我还包含了一个执行另一个功能的按钮。

我遇到的问题是，当您单击按钮时，按钮和搜索结果都会收到单击事件并对其进行操作。如果单击按钮，我不希望搜索结果也处理它。

我该如何排序？

score 2 · Accepted Answer

JavaScript 事件默认会在 DOM 中冒泡，因此在子级上触发的事件将在父级上触发。

为防止这种情况，您需要停止事件的传播。

这是通过以下方式完成的：

event.stopPropagation();

请注意，event通常作为参数传递给您的回调函数。（意思是，不要使用onclick=""属性，所以你会得到函数回调）

完整文档：https
://developer.mozilla.org/en-US/docs/Web/API/event.stopPropagation （IE < 8 fallback：Prototype Event.StopPropagation for IE >= 8）

1 回答 1