一个div盒子，两个点击事件，互不干扰，可以使用阻止事件冒泡

1、示例

1）、点击整个盒子，会出现弹框

2）、点击定位符号，会在地图上定位到指定区域，但是弹框也展示了

2、原因：当一个元素触发了一个事件时，该事件会从触发元素开始向上层元素（父元素）进行传播，直到达到根节点

3、解决：

1）、template中

 2）、方法中

 4、原理：

e.stopPropagation()是一个常见的JavaScript事件方法，用于阻止事件的进一步传播或冒泡。在DOM中，当一个元素触发了一个事件时，该事件会从触发元素开始向上层元素（父元素）进行传播，直到达到根节点。通过调用e.stopPropagation()方法，可以阻止事件继续向上层元素传播。

具体来说，e是一个事件对象，它代表着当前触发的事件。调用e.stopPropagation()方法会立即停止事件在DOM中的传播过程，这意味着其他相关元素将不会收到该事件的通知。

需要注意的是，e.stopPropagation()方法只能阻止事件的冒泡传播，而无法阻止事件的捕获传播。如果想要同时阻止事件的捕获和冒泡传播，可以使用e.stopImmediatePropagation()方法。

总结起来，e.stopPropagation()方法可以用于阻止事件在DOM中的冒泡传播，以便控制事件触发的范围和影响。

 5、拓展：阻止事件的捕获和冒泡传播区别

事件的传播过程分为捕获阶段和冒泡阶段。在DOM树结构中，当一个元素触发了一个事件时，该事件会按照特定的顺序在元素树上进行传播。

捕获阶段是指从根节点开始，沿着DOM树向下寻找目标元素的过程。在这个阶段，事件会依次经过每个祖先元素，直到达到触发事件的目标元素。

冒泡阶段是指从目标元素开始，沿着DOM树向上寻找祖先元素的过程。在这个阶段，事件会依次经过每个祖先元素，直到达到根节点。

默认情况下，事件会首先在捕获阶段触发，然后在冒泡阶段继续触发。这样的传播机制可以让父元素或祖先元素在事件触发时有机会处理该事件。

而阻止事件的捕获和冒泡传播，就是指通过调用相应的方法来中断事件在DOM树上的传播过程，使得事件不再继续向上层元素传播或向下层元素捕获。

常用的阻止事件传播的方法包括：

• e.stopPropagation()：用于阻止事件在冒泡阶段继续传播，即停止事件冒泡。
• e.stopImmediatePropagation()：除了停止事件冒泡外，还可以阻止后续的同类型事件的触发。

需要注意的是，阻止事件的传播并不会影响该元素上已经绑定的其他事件的执行。只是不再触发与该事件相关的其他元素上的事件处理程序。