Javascript阻止事件通过元素传播

Question

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

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

认为以下代码会有所帮助，但没有帮助。

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

Answer 1

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

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

 if (e.currentTarget == this) 

但这始终是正确的-根据事件分配算法的定义，事件侦听器的this值和事件对象的currentTarget始终引用同一事物。 地狱， 甚至jQuery都这样做 。

所以你应该写

$(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);