Javascript阻止通过元素传播事件

Question

使用具有弹出窗口信息的谷歌地图。这些信息窗口具有可点击的图像。因此，我需要能够在infowindow中传播事件。但是我也可以点击通过infowindow到其他标记，导致当前信息窗关闭，并打开一个新的信息窗。

我不认为此问题特定于谷歌地图。有没有办法阻止事件通过元素传播？

认为下面的代码会有所帮助，但它没有。

$(document).on('touchstart', '.infoWindow', function(e){
  if ($(e.currentTarget) == $(this)) e.stopPropagation();
 });

Answer 1

if ($(e.currentTarget) == $(this))

永远不会为真。它创建了两个不同的jQuery实例，即使它们包含相同的元素，它们也不是同一个对象。你可能想要做

if (e.currentTarget == this)

但总是为true - 通过事件调度算法的定义，事件侦听器的this值和事件对象的currentTarget始终引用一样。见鬼，even jQuery does this。

所以你应该写

$(document).on('touchstart', '.infoWindow', function(e){
    e.stopPropagation();
});

阻止touchstart个事件在您的infoWindows中冒泡。

Answer 2

使用事件委派时，无法停止事件传播。事件委托依赖于冒泡事件，因此当委托处理程序获取事件时，事件已经通过每个其他元素冒泡。您需要将事件侦听器直接附加到元素。

$('.infoWindow').on('touchstart', function(e){
    e.stopPropagation();
});

事件委托通过将事件监听器添加到document来工作，然后每次document收到该touchstart事件时，jQuery会检查源元素及其所有父级是否与给定的选择器匹配。如果匹配，则调用处理程序。这就是为什么每次添加与给定选择器匹配的新元素时都不需要添加侦听器。

Answer 3

设置.infoWindow元素的背景颜色可能是一种解决方案。 如果它应该是透明的，您可以使用如下：

background-color: rgba(255, 0, 0, 0);