javascript - 隐藏弹出框功能 恢复打开弹出框功能

Question

我想制作一个由按钮激活的“弹出”框，以减少所有其他元素的不透明度。当用户点击框外时，它应该消失并且不透明度应该恢复正常。然而，这两个功能是相互冲突的。它需要我单击按钮两次才能调用 showBox() 。除非我在浏览器控制台中重新调用 hideOnClickOutside(document.querySelector('div')); ，否则单击框外不会执行任何操作。

为什么我必须单击“新音频”两次，并且为什么除非重新调用，否则 hideOnClickOutside() 不起作用？

function showBox() {
  document.body.style.opacity = "0.5";
  document.querySelector('div').style.display = "block";
}

document.querySelector('button').addEventListener('click', showBox);
const isVisible = elem => !!elem && !!(elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length); // source (2018-03-11): https://github.com/jquery/jquery/blob/master/src/css/hiddenVisibleSelectors.js
function hideOnClickOutside(element) {
  const outsideClickListener = event => {
    if (!element.contains(event.target) && isVisible(element)) { // or use: event.target.closest(selector) === null
      element.style.display = 'none';
      removeClickListener()
      document.body.style.opacity = "1";
    }
  }

  const removeClickListener = () => {
    document.removeEventListener('click', outsideClickListener)
  }

  document.addEventListener('click', outsideClickListener)
}

hideOnClickOutside(document.querySelector('div'));

<button>New Audio</button>

<div style="display: none">
  <button>Record Directly</button>
</div>

hideOnClickOutside() 函数取自 another StackOverflow answer

编辑

我发现它需要两次单击，因为在第一次单击时，showBox() 被调用，但紧接着，outsideClickListener 也被调用，此时元素现在可见，并且用户已单击元素“外部”。这将恢复 showBox() 的样式更改。

Answer 1

最简单的解决方法是存储对“新音频”按钮的引用，并检查它是否是点击文档<的目标/。如果是这样，则从函数返回而不更新DOM。

const button = document.querySelector('button')
button.addEventListener('click', showBox);
// ..
function hideOnClickOutside(element) {
  const outsideClickListener = event => {
    if (event.target === button) return 
// ..

请记住，使用您当前的代码，hideOnClickOutside 函数只能在第一次 isVisible 为 true 且 target 时获取不是 button，因为您在该条件下删除了事件监听器。

function showBox(e) {
  document.body.style.opacity = "0.5";
  document.querySelector('div').style.display = "block";
}
const button = document.querySelector('button')
button.addEventListener('click', showBox);
const isVisible = elem => !!elem && !!(elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length); // source (2018-03-11): https://github.com/jquery/jquery/blob/master/src/css/hiddenVisibleSelectors.js
function hideOnClickOutside(element) {
  const outsideClickListener = event => {
    if (event.target === button) return 
    if (!element.contains(event.target) && isVisible(element)) { // or use: event.target.closest(selector) === null
      element.style.display = 'none';
      removeClickListener()
      document.body.style.opacity = "1";
    }
  }

  const removeClickListener = () => {
    document.removeEventListener('click', outsideClickListener)
  }

  document.addEventListener('click', outsideClickListener)
}

hideOnClickOutside(document.querySelector('div'));

<button>New Audio</button>

<div style="display: none">
  <button>Record Directly</button>
</div>

另一个问题是，一旦调用 showBox 函数，您实际上可能希望在外部考虑 button。让我们重构您的代码以存储对 showButton 和 box 的引用，添加一个标志来禁用 showButton 并且仅如果单击 showButton，则将事件监听器添加到文档，并仅在显示该框时删除事件监听器。

您可以稍后重构它以适合您的特定用例。这个想法是考虑该应用程序可能处于的各种状态并创建函数来管理该状态。

const box = document.querySelector('#box');
const showButton = document.querySelector('#show-button');
showButton.addEventListener('click', showBox);

let isDisabled = false;
const isVisible = elem => !!elem && !!(elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length); // source (2018-03-11): https://github.com/jquery/jquery/blob/master/src/css/hiddenVisibleSelectors.js

function toggleDisabled(bool) {
    showButton.attributes.disabled = bool;
    isDisabled = bool;
}

function toggleDisplay(display, opacity) {
    document.body.style.opacity = opacity;
    box.style.display = display;
}

function showBox(event) {
  if (!isDisabled) {
    event.preventDefault();
    event.stopPropagation();
    toggleDisplay("block", 0.5);
    toggleDisabled(true);
    document.addEventListener('click', outsideClickListener);
  }
}

function outsideClickListener(event) {
  if (!box.contains(event.target) && isVisible(box)) { // or use: event.target.closest(selector) === null
    toggleDisplay("none", 1);
    toggleDisabled(false);
    document.removeEventListener('click', outsideClickListener)
  }
}

<button id="show-button">New Audio</button>

<div id="box" style="display: none">
  <button>Record Directly</button>
</div>