javascript - Z 索引不起作用

Question

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

容器点击事件工作正常，但当点击关闭按钮时，它同时调用关闭点击事件和容器点击事件。我已将 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" );
});

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

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