Z索引不工作

Question

嗨我有一個容器上的關閉按鈕，我想創建兩個不同的點擊事件。當用戶點擊關閉按鈕時，它應該調用關閉按鈕點擊事件，當點擊容器時，它應該調用容器點擊事件。

容器點擊事件工作正常，但點擊關閉按鈕時，它正在調用關閉點擊事件和contianer點擊事件。我已將z-index:9999設置爲關閉div，但仍然無法正常工作。

這是我的 Jsfiddle code。

$("#close-button-landscape").click(function() { 
    alert("close button click"); 
}); 
$("#container").click(function() { 
    alert("container click"); 
}); 

感謝您的回答。在JQuery中，我可以使用event.stopPropagation();，但是如果點擊事件不使用Jquery和純javascript。看到這個updated Jsfiddle，那麼如何阻止泡沫事件？

Answer 1

你應該做的是做一些所謂的停止傳播

$("#close-button-landscape").click(function(evt) { 
    evt.stopPropagation(); 
    alert("close button click"); 
}); 

這阻止了click事件冒泡到容器之一，也是。

注意：在這種情況下，z-index不會影響任何東西。 z-index只會按順序繪製元素......並且＃容器覆蓋的區域大於關閉按鈕所影響的區域

Answer 2

該按鈕仍在容器中，因此您必須停止點擊通過：

$('#close-button-landscape').click(function(event) 
{ 
event=event||window.event; 
if(event.stopPropagation) 
{ 
    event.stopPropagation(); 
} 
else 
{ 
    event.cancelBubble=true; 
} 
} 

Answer 3

只需使用stopPropagation

$("#close-button-landscape").click(function(e) { 
    e.stopPropagation(); 
    alert("close button click"); 
}); 
$("#container").click(function() { 
    alert("container click"); 
});