2014-10-02 67 views
0

使用带有infowindows弹出窗口的Google地图。这些infowindows具有可点击的图像。因此我需要能够在infowindow中传播事件。不过,我也可以通过infowindow单击其他标记,导致当前infowindow关闭,并打开一个新的infowindow。Javascript阻止事件通过元素传播

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

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

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

听起来['.stopImmediatePropagation()'](http://api.jquery.com/event.stopimmediatepropagation/)可能是值得一试 – loveNoHate 2014-10-02 16:19:23

+2

请解释'($ e.currentTarget)== $(this)'检查应该做什么(顺便说一句,它永远不会工作,因为'$ e'没有被定义,即使它是'$(e。 currentTarget)== $(this)'那么它总是会创建两个不同的jQuery对象) – Bergi 2014-10-02 16:20:33

+0

$ e是如何定义的? – user3032973 2014-10-02 16:25:18

回答

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

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

if (e.currentTarget == this) 

但这总是真 - 由事件调度算法的定义,事件侦听器的this值和事件对象的currentTarget总是指一样的东西。地狱,even jQuery does this

所以,你应该只写

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

,以防止通过您的信息窗口冒泡touchstart事件。

1

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

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

事件代表团的工作原理是将事件监听器document,然后每次document收到touchstart事件,jQuery的检查源元素及其所有家长,如果他们的指定选择器匹配的时间。如果一个匹配,处理程序会被调用。这就是为什么每次添加一个匹配给定选择器的新元素时都不需要添加侦听器。

0

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

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