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