如何在HTML的内部部分点击外部部分的功能？

Question

Plaese have a look on Image

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

点击第2部分，功能XYZ（）;获取调用和函数ABC（）以及它位于其父节。

我要求在点击第2部分时仅调用函数XYZ（），而不是ABC（），这是其父节部分的函数。

例如 -

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

点击<span>标签部分只有XYZ（）函数应该调用而不是ABC（）函数。

Answer 1

您需要使用$event.stopPropagation方法阻止点击事件冒泡DOM树：

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