需要停止传播以防止在单击下拉内容时关闭菜单

Question

I need to hold the the dropdown when a click is made inside the items of dropdown, for which I added two commented lines beneath TO-DO comment in my JS file below, and it is not the right way to go, but it does hold the dropdown when dropdown items are clicked but it breaks one of my functionality ie when i make a click outside area of dropdown the dropdown is minimized.当在下拉项目中单击时，我需要按住下拉列表，为此我在下面的 JS 文件中的 TO-DO 注释下方添加了两条注释行，这不是 go 的正确方法，但它确实持有单击下拉项目时的下拉菜单，但它破坏了我的一项功能，即当我在下拉菜单区域之外单击时，下拉菜单被最小化。 The error produced at the console says "Uncaught TypeError" addEventListener is not a function.控制台产生的错误显示“Uncaught TypeError”addEventListener 不是 function。 Please correct me by making use of pure javascript only.请仅使用纯 javascript 来纠正我。

 HTML - 
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/98.css">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<title>Test</title>

</head>
 <body>

   <div class="window" style="width: 100%">
    <div class="title-bar">
     <div class="title-bar-text">Test Page</div>
      <div class="title-bar-controls">
        <button aria-label="Minimize"></button>
        <button aria-label="Maximize"></button>
        <button aria-label="Close"></button>
    </div>
   </div>

  <!-- Main menu -->
  <div class="window-body">
  <div class="dropdown">
    <button class="dropbtn" onclick="open_dropdown('dd_file')">File</button>
    <div class="dropdown-content" id="dd_file">
      <a href="#">Open</a>
      <a href="#">Close</a>
      <a href="#">Settings</a>
    </div>
  </div>
  <div class="dropdown">
    <button class="dropbtn" onclick="open_dropdown('dd_edit')">Edit</button>
    <div class="dropdown-content" id="dd_edit">
      <a href="#">Cut</a>
      <a href="#">Copy</a>
      <a href="#">Paste</a>
    </div>
  </div>
  <div class="dropdown">
    <button class="dropbtn" onclick="open_dropdown('dd_view')">View</button>
    <div class="dropdown-content" id="dd_view">
      <a href="#">Toggle CSS</a>
      <a href="#">Toggle Javascript</a>
    </div>
  </div>
  <div class="dropdown">
    <button class="dropbtn" onclick="open_dropdown('dd_tools')">Tools</button>
    <div class="dropdown-content" id="dd_tools">
      <a href="#">Not Decided</a>
    </div>
  </div>
  <div class="dropdown">
    <button class="dropbtn" onclick="open_dropdown('dd_favorite')">Favourties</button>
    <div class="dropdown-content" id="dd_favorite">
      <a href="#">Add New Favorite</a>
      <a href="#">Add this Page to Favorites</a>
      <a href="#">Show Favorites</a>
    </div>
  </div>
  <div class="dropdown">
    <button class="dropbtn" onclick="open_dropdown('dd_help')">Help</button>
    <div class="dropdown-content" id="dd_help">
      <a
        href="#">Final</a>
    </div>
  </div>
  </div>
 </div>

</body>
</html>

  CSS - 
 .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 {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

JS- 
 function open_dropdown(element_id) {
 console.log('Opening Dropdown:', element_id)
 close_all_dropdowns()
 document.getElementById(element_id).style.display = 'block';
}

 // Close the dropdown if the user clicks outside of it
 function close_dropdown(element) {
 console.log('I am closing dropdown:', element)
 element.style.display = 'none'
 }

 // Close all dropdowns.
 function close_all_dropdowns() {
 var dropdowns = document.getElementsByClassName('dropdown-content')
 for (var i = 0; i < dropdowns.length; i++) {
 close_dropdown(dropdowns[i]);
 }
}

// Close all dropdowns.
function close_all_dropdowns() {
var dropdowns = document.getElementsByClassName('dropdown-content')
for (var i = 0; i < dropdowns.length; i++) {
close_dropdown(dropdowns[i]);
}
}

// Close all dropdowns when clicking outside.
window.onclick = function (e) {
 //TO-DO
//document.getElementsByClassName(' ').addEventListener('click', 
//function (e) {e.stopPropagation(); });
if (!e.target.matches('.dropbtn')) {
close_all_dropdowns()
}
}

Answer 1

Add an event listener to all your links.为所有链接添加事件侦听器。 I added this to the bottom of your JS.我将此添加到您的 JS 的底部。

window.onload = (event) => {
  alert('page is fully loaded')
  var elements = document.querySelectorAll('.dropdown a')
  for (var i = 0, len = elements.length; i < len; i++) {
    elements[i].onclick = function (e) {
      alert('clicked a link')
      e.stopPropagation()
    }
  }
}

 function open_dropdown(element_id) { close_all_dropdowns() document.getElementById(element_id).style.display = 'block'; } // Close the dropdown if the user clicks outside of it function close_dropdown(element) { element.style.display = 'none' } // Close all dropdowns. function close_all_dropdowns() { var dropdowns = document.getElementsByClassName('dropdown-content') for (var i = 0; i < dropdowns.length; i++) { close_dropdown(dropdowns[i]); } } // Close all dropdowns when clicking outside. window.onclick = function (e) { //TO-DO //document.getElementsByClassName(' ').addEventListener('click', //function (e) {e.stopPropagation(); }); if (.e.target.matches('.dropbtn')) { close_all_dropdowns() } } window.onload = (event) => { var elements = document.querySelectorAll(';dropdown a'), for(var i = 0. len = elements;length; i < len. i++) { elements[i].onclick = function (e) { e;stopPropagation() } } };

 .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 { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; }

 <body> <!-- Main menu --> <div class="window-body"> <div class="dropdown"> <button class="dropbtn" onclick="open_dropdown('dd_file')">File</button> <div class="dropdown-content" id="dd_file"> <a href="#">Open</a> <a href="#">Close</a> <a href="#">Settings</a> </div> </div> <div class="dropdown"> <button class="dropbtn" onclick="open_dropdown('dd_edit')">Edit</button> <div class="dropdown-content" id="dd_edit"> <a href="#">Cut</a> <a href="#">Copy</a> <a href="#">Paste</a> </div> </div> <div class="dropdown"> <button class="dropbtn" onclick="open_dropdown('dd_view')">View</button> <div class="dropdown-content" id="dd_view"> <a href="#">Toggle CSS</a> <a href="#">Toggle Javascript</a> </div> </div> <div class="dropdown"> <button class="dropbtn" onclick="open_dropdown('dd_tools')">Tools</button> <div class="dropdown-content" id="dd_tools"> <a href="#">Not Decided</a> </div> </div> <div class="dropdown"> <button class="dropbtn" onclick="open_dropdown('dd_favorite')">Favourties</button> <div class="dropdown-content" id="dd_favorite"> <a href="#">Add New Favorite</a> <a href="#">Add this Page to Favorites</a> <a href="#">Show Favorites</a> </div> </div> <div class="dropdown"> <button class="dropbtn" onclick="open_dropdown('dd_help')">Help</button> <div class="dropdown-content" id="dd_help"> <a href="#">Final</a> </div> </div> </div> </div> </body>

Answer 2

document.getElementsByClassName('dropdown-content')

This method returns a collection of HTML Elements, and addEventListener can only be applied to one element.此方法返回 HTML 元素的集合，并且addEventListener只能应用于一个元素。

To add a listener to every element in the collection you have to loop through them and apply it to each one.要为集合中的每个元素添加侦听器，您必须遍历它们并将其应用于每个元素。

To add the listener to just one element you can just add an index:要将侦听器仅添加到一个元素，您只需添加一个索引：

document.getElementsByClassName('dropdown-content')[0].addEventListener('click', function (e) {
  e.stopPropagation();
});

需要停止传播以防止在单击下拉内容时关闭菜单

问题描述

2 个解决方案

解决方案1
2 已采纳 2020-11-30 00:53:34

解决方案2
1 2020-11-30 00:50:49

需要停止传播以防止在单击下拉内容时关闭菜单

问题描述

2 个解决方案

解决方案1 2 已采纳 2020-11-30 00:53:34

解决方案2 1 2020-11-30 00:50:49

解决方案1
2 已采纳 2020-11-30 00:53:34

解决方案2
1 2020-11-30 00:50:49