Question

我正在尝试创建一种窗口，当客户将产品添加到他/她的购物车时会弹出。外观如下：Red and green divs are the background. There is a div which makes it darker (#overlay-daddy), and the white div is its child (#overlay).

使用JS，我在＃overlay-daddy上添加了一个事件监听器，该监听器应该将其display属性设置为none。我的问题是，当我单击#overlay时，它还会触发一个事件。预先感谢！

这是我的代码：

#overlay-daddy {
  position: absolute;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

#overlay {
  position: absolute;
  z-index: 2;
  top: 30%;
  left: 20%;
  width: 60%;
  height: 40%;
  background-color: #fff;
}

<html lang="fr">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="/css/batiprox_common.css">
</head>
<body>
  <div style="height: 50%; background-color: red"></div>
  <div style="height: 50%; background-color: green"></div>
  <div id="overlay-daddy">
    <div id="overlay">
    </div>
  </div>
  <script type="text/javascript">
    var dad = document.getElementById('overlay-daddy');
    //dad.addEventListener("click", function() { this.style.display = "none";});
    dad.addEventListener("click", function() { alert(this); });
  </script>
</body>
</html>

Answer 1

还要在#overlay上注册一个点击处理程序，以防止Default（）;

在我的头顶上，看起来可能像这样：

const char**

请注意，您可能不需要全部三个电话，但是已经有一段时间了，我的记忆还不清楚您真正需要哪个电话。

Answer 2

您需要停止传播事件。只需在事件监听器中添加e.eventPropagation()即可进行覆盖。

var dad = document.getElementById('overlay-daddy');
var overlay = document.getElementById('overlay');

overlay.addEventListener("click", function(e) {
  e.stopPropagation();
});

dad.addEventListener("click", function() {
  alert(this);
});

#overlay-daddy {
  position: absolute;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

#overlay {
  position: absolute;
  z-index: 2;
  top: 30%;
  left: 20%;
  width: 60%;
  height: 40%;
  background-color: #fff;
}

<div style="height: 50%; background-color: red"></div>
<div style="height: 50%; background-color: green"></div>
<div id="overlay-daddy">
  <div id="overlay">
  </div>
</div>

Answer 3

要在叠加层的子级中禁用click事件，您需要使用if(event.target===this)来测试clicked元素是否是叠加层本身，而不是其子级之一：

#overlay-daddy {
  position: absolute;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

#overlay {
  position: absolute;
  z-index: 2;
  top: 30%;
  left: 20%;
  width: 60%;
  height: 40%;
  background-color: #fff;
}

<html lang="fr">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="/css/batiprox_common.css">
</head>
<body>
  <div style="height: 50%; background-color: red"></div>
  <div style="height: 50%; background-color: green"></div>
  <div id="overlay-daddy">
    <div id="overlay">
    </div>
  </div>
  <script type="text/javascript">
    var dad = document.getElementById('overlay-daddy');
    
    //dad.addEventListener("click", function() { this.style.display = "none";});
    
    dad.addEventListener("click", function(event) {
      if(event.target===this) alert(this);
    });
  </script>
</body>
</html>

Answer 4

“ overlay”元素上的click事件正在传播到其父对象。您可以在“ overlay”元素中添加event.stopPropogation。

您可以按如下所示修改叠加元素。

<div id="overlay" onclick="event.stopPropagation();">
</div>

Answer 5

我猜你的代码在＃overlay-daddy中需要自下而上

#overlay-daddy {
  position: absolute;
  z-index: 3; // edited
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0; // added bottom
  right: 0; // added right
}

因此，如果您想单击＃overlay-daddy，则需要为其设置z-index大于#overlay

希望它能对您有所帮助。

外部点击即可覆盖

5 个答案: