javascript - 在 UI 中选择性地与图像交互

我对 HTML、CSS、JS 很陌生。所以请承担我的菜鸟问题。

我正在开发一个 UI 应用程序。

UI 元素之一是水平条。此条位于 div 内。此条包含图像和图像名称。用户可以单击栏上的任意位置，并调用 js 功能（例如 A）。

我现在需要向这个栏添加另一个图像。并且当用户鼠标单击此图像时，将调用一个 js 函数（例如 B）。我在这里看到一个问题。

由于此图像是栏的一部分，因此单击它将调用 A。我需要停止此调用，并确保当用户单击此新图像时仅调用 B。单击该栏的任何其他部分仍会调用 A。

如何做到这一点？

标签： javascripthtmlcssuser-interface

您应该e.stopPropagation在调用时使用，B以防止事件冒泡到酒吧点击处理程序。

bOnClick = e => {
    e.stopPropagation();
    // Do stuff...
}