Z 索引不起作用

Question

您好，我在容器上有一个关闭按钮，我正在尝试创建两个不同的点击事件。当用户点击关闭按钮时，它应该调用关闭按钮点击事件，当点击容器时，它应该调用容器点击事件。

容器点击事件工作正常，但当点击关闭按钮时，它同时调用关闭点击事件和容器点击事件。我已将 z-index:9999 设置为收盘价 div 但这仍然不起作用。

$( "#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" );
});

这也可以防止点击事件冒泡到容器。

注意：z-index 在这种情况下不会有任何影响。 z-index 只会乱序绘制元素...#container 覆盖的区域大于关闭按钮影响的区域

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

Z 索引不起作用

Z-index not working

html

javascript

css

jquery

z-index