javascript - javascript改变可见性的元素不可点击

Question

Fiddle

我有以下 CSS/Javascript 代码，您可以在 fiddle 中找到它，我试图让一个元素在单击后弹出(用作工具提示)。

这部分工作正常，但是我试图在再次单击该弹出窗口后执行另一个操作。然而，弹出窗口是绝对不可点击的(点击弹出窗口只是点击它下面的按钮。实际上并没有点击弹出窗口本身)。

我尝试为 CSS 中的弹出元素设置一个高 z-index，我尝试为按钮设置一个 pointer-event: none ，我尝试将 pointer-event: all 设置为弹出窗口，但也无济于事。在 stackoverflow 上提出的关于这个主题的所有其他问题实际上都有相反的问题。为什么会这样？我该如何解决？

注意:预期结果是 javascript 记录 test2 而不是 test1 以防万一您不理解我要描述的内容。

Answer 1

您的版本设计过度。您可以浏览很多内容，我已经创建了一个简单的示例来说明如何实现这一点。将子元素移到外面，但将按钮和子元素包装在容器中以构建我们的 html。

然后，我们只需添加点击事件监听器即可在您点击子元素时激活弹出窗口和控制台记录您的“test2”。

var box = document.getElementById("emoji-button");
var popup = document.getElementById("emoji-box");

box.addEventListener('click', function() {
  popup.classList.toggle('active');
});

popup.addEventListener('click', function() {
  console.log("do other stuff");
});

#emoji-container {
  position: relative;
}

#emoji-box {
  display: none;
  user-select: none;
  position: absolute;
  color: #FFF;
  background: #000;
  border: 1px solid #3A7300;
  text-align: center;
  padding: 3px;
  border-radius: 6px;
  font-weight: bold;
  max-width: 350px;
  margin-top: 8px;
}

#emoji-box:before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  margin-left: -8px;
  width: 0;
  height: 0;
  border-bottom: 8px solid #000;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}

#emoji-box.active {
  display: block;
  padding: 5px;
}

<div class="emoji-container">
  <button id="emoji-button">Emoji Button</button>
  <div id="emoji-box">Some text</div>
</div>

Other content...