javascript - 下拉按钮仅在边框附近单击时才起作用

Question

我已经成功编写了一个下拉按钮，单击时显示文本，然后单击页面上的其他任何位置则消失。但我有一个问题，由于某种原因，除非您单击按钮的外边缘而不是中心，否则该按钮将无法工作。 (例如，如果您单击按钮中间，则不会发生任何事情，但如果您单击按钮边缘附近，则会显示下拉菜单。)

有谁知道为什么会发生这种情况以及如何修复它，以便无论您单击按钮的何处，都会显示下拉列表。

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}
  
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

.dropbtn {
  cursor: pointer;
  background-color: #fafafa;
  border: none;
  text-align: left;
  margin-bottom: 5px;
  padding-left: 0px;
}

.dropdown {
  position: absolute;
  display: inline-block;
  text-align: left;
}

.dropdown-content {
  display: none;
  position: relative;
  overflow: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  z-index: 1;
  background-color: #eeeeee;
  padding: 10px;
}


.show { 
  display: block;
}

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn"><p>Dropdown Button</p></button>
  <div id="myDropdown" class="dropdown-content">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.
  </div>
</div>

Answer 1

这是因为该事件源自p 标记。删除该内容并向 dropbtn 添加填充以实现类似的样式

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

.dropbtn {
  cursor: pointer;
  background-color: #fafafa;
  border: none;
  text-align: left;
  padding: 10px;
}

.dropdown {
  position: absolute;
  display: inline-block;
  text-align: left;
}

.dropdown-content {
  display: none;
  position: relative;
  overflow: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  z-index: 1;
  background-color: #eeeeee;
  padding: 10px;
}

.show {
  display: block;
}

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">
  Dropdown Button</button>
  <div id="myDropdown" class="dropdown-content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.
  </div>
</div>