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

我对HTML、CSS和JS都是新手。所以请接受我的提问

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

其中一个UI元素是水平条。该条位于div中。该条包含图像和图像的名称。用户可以单击工具栏上的任意位置，并调用js功能（例如a）

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

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

如何实现这一点？

您应该在调用

B

时使用，以防止事件冒泡到条单击处理程序

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

---

你能提供一些实际的代码吗？