OnClick on div 元素仅在其中一部分起作用

Posted 2023-02-18

【中文标题】OnClick on div 元素仅在其中一部分起作用

【英文标题】：OnClick on div element works only in part of it

【发布时间】：2022-01-04 15:47:46

【问题描述】：

几天前我开始创建网站，现在我遇到了第一个真正的问题：

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');
      
    
  


function myLama(x) 
  x.classList.toggle("change");

.dropbtn 
  display                : inline-block;
  margin-right           : 6%    !important; 
  float                  : right !important;
  padding-top            : 0px   !important;
  margin-top             : -40px !important;
  cursor                 : pointer;
  
.dropdown 
  position               : relative;
  display                : inline-block;
  float                  : right;
  top                    : 40px;
  right                  : 6%;
  
.dropdown-content 
  display                : none;
  min-width              : 14px;
  box-shadow             : 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index                : 1;
  border-radius          : 25px;
  width                  : 10%;
  float                  : right;
  margin-right           : 33px;
  
.dropdown-content a 
  color                  : white;
  padding                : 12px 16px;
  text-decoration        : none;
  display                : block;
  border                 : 2px solid white;
  border-radius          : 25px;
  font-size              : 20px;
  margin-top             : 5px;
  
.dropdown-content a      : hover 
  background-color       : #ffffff10;
  backdrop-filter        : blur(12px);
  -webkit-backdrop-filter: blur(12px);
  
.show 
  display                : block;
  
.btn 
  -ms-touch-action       : manipulation;
  touch-action           : manipulation;
  cursor                 : pointer;
  -webkit-user-select    : none;
  -moz-user-select       : none;
  -ms-user-select        : none;
  user-select            : none;
  
.komorka 
  background-color       : #ffffff10;
  backdrop-filter        : blur(12px);
  -webkit-backdrop-filter: blur(12px);
  min-width              : 110px;
  box-shadow             : 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index                : 1;
  border-radius          : 25px;
  width                  : 10%;
  border                 : 2px solid white;
  color                  : white;
  margin-left            : auto;
  margin-right           : auto;
  

  <div class="dropbtn" onclick="myLama(this); myFunction()">
    <div onclick="myFunction()">
      <div class="bar1" ></div>
      <div class="bar2" ></div>
      <div class="bar3" ></div>
    </div>
  </div>

  <div id="myDropdown" class="dropdown-content">
    <a href="#" class="komorka">Link 1</a>
    <a href="#" class="komorka">Link 2</a>
    <a href="#" class="komorka">Link 3</a>
  </div>
</div>

javascript 完美运行，但为什么它只在我单击它的一部分时才起作用，而不是当我单击元素上我想要的任何位置时？

我想解决，谁能帮帮我？

here it works

here it doesnt work because i didint click on right spot

【问题讨论】：

您的代码不会产生您描述的输出或图像中的内容。请编辑您的帖子以创建您描述的minimal reproducible example。请删除与您的问题没有直接关系的任何内容（css）。

如果您使用的是Chrome，您可以右键单击>检查单击不起作用的位置，然后您可以检查该位置是否真的是div。也许 div 上有一个元素拦截了点击（有些元素会这样做，即使没有为其分配 onclick）。

【参考方案1】：

我不确定这是否可行，但您可以尝试向 .dropbtn 类添加一些宽度和高度，如下所示：

.dropbtn 
    width: 50px; /*change to the size you need*/
    height: 50px; /*change to the size you need*/

【讨论】：

不幸的是它不起作用，它只是将下拉菜单向下和向左移动 50 像素