Question

我有一个公告栏，该公告栏的中心按钮链接到另一个站点。它的最右边还有一个“关闭”按钮。当我单击中心按钮时，关闭按钮也会被触发。

我测试了一下是否是因为我是通过将#close div中的#bar div删除而将其封装在其中的，但仍然会导致相同的问题。

var closeBar = document.getElementById("close");
var bar = document.getElementById("bar");
if (closeBar) {
  addEventListener('click', function() {
    bar.classList.add('superHidden');
  })
}

#bar {
  position: fixed;
  width: 100vw;
  display: flex;
  height: 50px;
  bottom: 0px;
  left: 0px;
}

ul {
  display: flex;
  justify-content: center;
  height: 100%;
  list-style: none;
}

li {
  margin: auto 0;
  font-size: 22px;
}

#close {
  position: fixed;
  right: 20px;
  bottom: 0;
  z-index: 1000;
  height: 50px;
  width: 25px;
  cursor: pointer;
}

.superHidden {
  display: none!important;
}

<div id="bar">
  <ul>
    <li><a target="_blank" href="google.com"><button >Google</button></a></li>
  </ul>
  <div id="close">
    <ul>
      <li>X</li>
    </ul>
  </div>
</div>

Answer 1

您没有为事件侦听器指定目标，因此要向整个窗口中添加一个click事件：

addEventListener('click', function() {
    bar.classList.add('superHidden');
})

如果您单击窗口上的任意位置，则会触发此事件。

听起来您想将事件添加到“关闭按钮”中：

closeBar.addEventListener('click', function() {
    bar.classList.add('superHidden');
})

完整示例：

var closeBar = document.getElementById("close");
var bar = document.getElementById("bar");
if (closeBar) {
  closeBar.addEventListener('click', function() {
    bar.classList.add('superHidden');
  })
}

#bar {
  position: fixed;
  width: 100vw;
  display: flex;
  height: 50px;
  bottom: 0px;
  left: 0px;
}

ul {
  display: flex;
  justify-content: center;
  height: 100%;
  list-style: none;
}

li {
  margin: auto 0;
  font-size: 22px;
}

#close {
  position: fixed;
  right: 20px;
  bottom: 0;
  z-index: 1000;
  height: 50px;
  width: 25px;
  cursor: pointer;
}

.superHidden {
  display: none!important;
}

<div id="bar">
  <ul>
    <li><a target="_blank" href="google.com"><button >Google</button></a></li>
  </ul>
  <div id="close">
    <ul>
      <li>X</li>
    </ul>
  </div>
</div>

单击不属于“关闭”按钮的单独按钮始终触发关闭事件

1 个答案: