Javascript阻止事件通过元素传播



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

我不认为这个问题是谷歌地图特有的。有没有一种方法可以阻止事件在元素中传播?

本以为下面的代码会有所帮助,但没有。

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

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

if (e.currentTarget == this)

但这是总是真的-根据事件调度算法的定义,事件侦听器的this值和事件对象的currentTarget总是指同一个东西。见鬼,连jQuery都这么做。

所以你应该写

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

以防止touchstart事件在您的infoWindows中冒泡。

使用事件委派时无法停止事件传播。事件委派依赖于冒泡事件,因此当委派的处理程序获得该事件时,该事件已经在其他所有元素中冒泡。您需要将事件侦听器直接附加到元素。

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

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

设置.infoWindow元素的背景颜色可能是一个解决方案。如果它应该是透明的,你可以使用如下:
background-color: rgba(255, 0, 0, 0);

最新更新