使用純JS在外部單擊時無法隱藏DIV

我一直在使用 JavaScript 并遇到以下問題。有人可以解釋為什么當我在 DIV 外部單擊時 id="list-container" 不會隱藏嗎？

HTML：

<header class="main-container">
        <div id="list-container">
            <ul class="ul">
                <li class="list-item"><a>List Item 1</a></li>
                <li class="list-item"><a>List Item 2</a></li>
                <li class="list-item"><a>List Item 3</a></li>
                <li class="list-item"><a>List Item 4</a></li>
                <li class="list-item"><a>List Item 5</a></li>
            </ul>
        </div>
        
    </header>

    <button onClick="document.getElementById('list-container').style.visibility='visible'" type="button" class="button">Click me!</button>

JavaScript：

const listContainer = document.getElementById('list-container')

document.addEventListener('click', (e) => {

    if (e.target != listContainer) {
        listContainer.style.visbility = 'hidden'
    }
})

uj5u.com熱心網友回復：

第一個問題是該屬性稱為可見性而不是可見性

這里的想法是檢測頁面上的點擊事件，并且僅當點擊的目標不是 div 后代之一時才將容器的顯示設定為無。

document.addEventListener('mouseup', function(e) {
  var listContainer = document.getElementById('list-container');
  if (!listContainer.contains(e.target)) {
      listContainer.style.visibility = 'hidden';
  }
});

<header class="main-container">
  <div id="list-container">
      <ul class="ul">
          <li class="list-item"><a>List Item 1</a></li>
          <li class="list-item"><a>List Item 2</a></li>
          <li class="list-item"><a>List Item 3</a></li>
          <li class="list-item"><a>List Item 4</a></li>
          <li class="list-item"><a>List Item 5</a></li>
      </ul>
  </div>
</header>

<button onClick="document.getElementById('list-container').style.visibility='hidden'" type="button" class="button">Click me!</button>

uj5u.com熱心網友回復：

您的腳本中有錯字。使用“可見性”而不是“可見性”。但是您的腳本中也存在一個邏輯缺陷：click 事件處理程式被多次有效地觸發。在下面的腳本中，它只會被呼叫一次。然后listContainer.style.visibility = e.target.id==="btn" || e.target.closest(".ul")運算式檢查單擊了哪個元素并使ul“可見”或“隱藏”：

const listContainer = document.getElementById('list-container');

document.addEventListener('click', (e) => {
  console.log(e.target.tagName);
  listContainer.style.visibility = e.target.id==="btn" || e.target.closest(".ul") 
   ? "visible" : "hidden";
})

<header class="main-container">
  <div id="list-container">
    <ul class="ul">
      <li class="list-item"><a>List Item 1</a></li>
      <li class="list-item"><a>List Item 2</a></li>
      <li class="list-item"><a>List Item 3</a></li>
      <li class="list-item"><a>List Item 4</a></li>
      <li class="list-item"><a>List Item 5</a></li>
    </ul>
  </div>

</header>
<button id="btn">Click me!</button>

uj5u.com熱心網友回復：

因此，您的按鈕不起作用有兩個原因。第一個是您正在檢查要隱藏的 div 之外的點擊，并且該按鈕位于 div 之外。其次，onclick 有一個小寫的 C，也只是用來呼叫 JS 中的函式。在這里，我創建了一個函式，將可見性設定為可見，然后當它設定為隱藏的表時，檢查按鈕是否未被點擊。

const listContainer = document.getElementById('list-container')

function returnVis() {
    listContainer.style.visibility = 'visible'
}

document.addEventListener('click', (e) => {

    if (e.target != listContainer && e.target != document.getElementById('visbtn')) {
        listContainer.style.visibility = 'hidden';
    }
})

<header class="main-container">
        <div id="list-container">
            <ul class="ul">
                <li class="list-item"><a>List Item 1</a></li>
                <li class="list-item"><a>List Item 2</a></li>
                <li class="list-item"><a>List Item 3</a></li>
                <li class="list-item"><a>List Item 4</a></li>
                <li class="list-item"><a>List Item 5</a></li>
            </ul>
        </div>
        
    </header>

    <button id='visbtn' onclick="returnVis()" type="button" class="button">Click me!</button>

如果您希望從視口中完全洗掉表格，請使用

listContainer.style.display = "hidden"

和

listContainer.style.display = "";

uj5u.com熱心網友回復：

使用顯示：無

const listContainer = document.getElementById('list-container');

      document.addEventListener('click', (e) => {
        if (e.target != listContainer) {
          listContainer.style.display = 'none';
        }
      });

標籤：javascript

上一篇：`javascript`我們可以使用映射函式引數值再次使用映射函式嗎？[復制]

下一篇：將物件陣列傳遞給另一個類