Question

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

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

private List<Book> books = new ArrayList<Book>();

Z-index不起作用

3 个答案: