JavaScript 如何避免下拉菜单在点击内部时关闭菜单项

我们可以使用preventDefault()方法来阻止下拉菜单上的点击事件的默认行为。通过这样做，菜单项在内部点击时不会关闭。此外，我们可以给下拉菜单添加一个点击事件监听器，并设置event.stopPropagation()方法来阻止事件传播到父元素。

HTML下拉菜单

HTML下拉菜单是一种表单元素，它允许用户从一个选项列表中选择一个选项。它是用HTML中的” select “和” option “标签创建的。选择 “标签定义了下拉容器，”选项 “标签定义了下拉中的选项。要预选一个选项，请使用 “选项 “标签上的 ” 选定 “属性。所选选项的值可以使用JavaScript或通过使用 “select “标签上的 “name “属性来访问。

方法

防止下拉菜单在点击内部时关闭的一个方法是使用event.stopPropagation()方法来防止事件涌向父元素。你可以把这个方法附加到下拉菜单或其子元素的点击事件中，以防止菜单在点击它时关闭。

document.querySelector('.dropdown-menu').addEventListener('click', function(event) {
   event.stopPropagation();
});

或者，你可以使用event.preventDefault()来阻止点击事件的默认行为，这也可以阻止菜单关闭 −

document.querySelector('.dropdown-menu').addEventListener('click', function(event) {
   event.preventDefault();
});

你也可以用jQuery来做这件事–

$(".dropdown-menu").click(function(event){
   event.stopPropagation();
});

还需要注意的是，这取决于你所使用的框架或库。一些框架或库可能有自己的方法来处理点击事件并防止其关闭菜单。

最后的代码

下面是一个例子，说明如何使用JavaScript和HTML创建一个在点击某个项目时不会关闭的下拉菜单—-。

HTML

<div class="dropdown">
   <button class="dropbtn">Dropdown</button>
   <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
   </div>
</div>

CSS

.dropbtn {
   background-color: #4CAF50;
   color: white;
   padding: 16px;
   font-size: 16px;
   border: none;
}
.dropdown {
   position: relative;
   display: inline-block;
}
.dropdown-content {
   display: none;
   position: absolute;
   background-color: #f1f1f1;
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   z-index: 1;
}
.dropdown-content a {
   color: black;
   padding: 12px 16px;
   text-decoration: none;
   display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {
   display: block;
}
.dropdown:hover .dropbtn {
   background-color: #3e8e41;
}

脚本

// Get all the links inside the menu
var dropdownLinks = document.querySelectorAll(".dropdown-content a");

// Add a click event listener to each link
dropdownLinks.forEach(function(link) {
   link.addEventListener("click", function(event) {
      // Prevent the default action of the link (redirecting to the href)
      event.preventDefault();

      // Do something else here (e.g. update the page with the link's data)
   });
});

解释

在这个例子中，我们使用HTML和CSS创建了一个下拉菜单。该菜单默认是隐藏的，当用户将鼠标悬停在按钮上时才会显示。

在JavaScript中，我们首先使用querySelectorAll()方法获得菜单中的所有链接。然后我们循环浏览所有的链接，为每个链接添加一个点击事件监听器。在事件监听器中，我们使用preventDefault()方法阻止链接的默认动作（即重定向到链接的href）。这样，当用户点击这些链接时，它就不会关闭菜单，你就可以对这些链接做其他事情。

你可以通过在每个链接的点击事件中添加一些自定义功能来进一步增强该功能。

完整的代码

<html>
   <style>
      .dropbtn {
      background-color: #4CAF50;
      color: white;
      padding: 16px;
      font-size: 16px;
      border: none;
   }
   .dropdown {
      position: relative;
      display: inline-block;
   }
   .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f1f1f1;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
   }
   .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
   }
   .dropdown-content a:hover {background-color: #ddd;}
   .dropdown:hover .dropdown-content {
      display: block;
   }
   .dropdown:hover .dropbtn {
      background-color: #3e8e41;
   }
   </style>
   <script>
      // Get all the links inside the menu
      var dropdownLinks = document.querySelectorAll(".dropdown-content a");

      // Add a click event listener to each link
      dropdownLinks.forEach(function(link) {
         link.addEventListener("click", function(event) {
            // Prevent the default action of the link (redirecting to the href)
            event.preventDefault();

            // Do something else here (e.g. update the page with the link's data)
         });
      });
   </script>
   <div class="dropdown">
      <button class="dropbtn">Dropdown</button>
      <div class="dropdown-content">
         <a href="#">Link 1</a>
         <a href="#">Link 2</a>
         <a href="#">Link 3</a>
      </div>
   </div>
</html>