2014-10-02 44 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);