Javascript 模式 onclick 在移动设备上不起作用

Question

问题出在移动设备上，点击背景时模态框没有关闭，我试过点击和点击 touchstart none 其中 worked.I 没有将下拉菜单放在模态框内，因为这是 header.I 我在 safari 上尝试这个的一部分。

html部分：

<div class="dropdown">
  
    <button class="dropbtn" onclick="showloc()" ><i class="zmdi zmdi-gps-dot" style="color:#555;margin-right:6px;"></i>Location 
      <i class="zmdi zmdi-chevron-down" style="color:#555;"></i>
</br>
<?php echo $locality; ?>
    </button>
    <div class="dropdown-content">
   <h3>Where do you want the delivery?</h3>
 <form class="locform" action="/action_page.php" autocomplete="off">
    <input type="text" id="fname" name="firstname" placeholder="Enter your delivery location">
  </form>

    </div>
  </div> 

<div id="myModal" class="modal"></div>

javascript代码：

var modal = document.getElementsByClassName('modal')[0];
var dc=document.getElementsByClassName('dropdown-content')[0];

function showloc(){

if(dc.style.display == "none"){
dc.style.display = "block";
modal.style.display="block";
}
else{
dc.style.display = "none";
modal.style.display="none";
}
}
window.addEventListener('click',function(){

if(event.target == modal){
modal.style.display="none";
dc.style.display="none";
}


});

样式部分：

    .modal {
    
      display:block;
      position: fixed; 
      z-index: 1; 
      padding-top: 50px; 
      left: 0;
      top: 0;
      width: 100%; 
      height: 100%; 
      overflow: auto; 
      background-color: rgb(0,0,0); 
      background-color: rgba(0,0,0,0.4); 
    }
.dropdown {
  float: left;
  overflow: hidden;
}
.dropdown .dropbtn {
  color: #555;
  text-decoration: none;
  padding: 15px 20px;
margin-top:3px;
  position: relative;
  display: inline-block;
  float:right;
font-size:17px;
}
   
.dropdown .dropdown-content {
  display: block;
  position: absolute;
  background-color: white;
  min-width: 400px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 70;
  text-align: center;
padding:20px;
margin-top:70px;
}

Answer 1

'click' 事件不会触发移动设备上的侦听器，因为没有点击。

你应该试试“touchend”。如果我是你，我会为 click 添加一个事件监听器，为 touchend 添加一个事件监听器，这样它就可以在移动设备和桌面设备上运行。

Javascript 模式 onclick 在移动设备上不起作用

Javascript modal onclick not working on mobile

html

javascript

css

modal-dialog