javascript - 如何在单击 HTML 内部部分时不调用外部部分的函数？

我有 2 个嵌套的 HTML 部分，其中在第一部分中我调用一个函数(假设它是 ABC();)，在第二部分中使用 onClick() 调用函数(假设它是 XYZ();)。第二部分位于第一部分的内部，如图所示。

单击第 2 部分，函数 XYZ()；获取调用和函数 ABC() 以及它位于其父部分中。

我的要求是在单击第 2 部分时仅调用函数 XYZ()，而不是其父部分的函数 ABC()。

例如 -

<div onClick='ABC();'>
    Some more code...
    <span onClick='XYZ()'>Click here</span>
</div>

点击<span>标签部分只有 XYZ() 函数应该被调用，而不是 ABC() 函数。

最佳答案

您需要使用 $event.stopPropagation 方法防止点击事件在 DOM 树中冒泡:

<div ng-click='ABC();'>
    Some more code...
    <span ng-click='XYZ(); $event.stopPropagation();'>Click here</span>
</div>

关于javascript - 如何在单击 HTML 内部部分时不调用外部部分的函数？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34313570/