无法点击移动设备上的项目答案

【问题标题】：Cannot click on an item on mobile devices无法点击移动设备上的项目
【发布时间】：2021-05-05 10:44:30
【问题描述】：

当我在PC上查看我的页面时，当我点击下面的<span>项目时，全屏搜索将打开。

<li><span class="text-white" id="open_search" onclick="openSearch()"><i class="fas fa-search mr-2"></i>Keresés</span></li>

但我的问题是，在移动设备上，当我单击跨度时没有任何反应。这有什么问题？

我用的是bootstrap 4，不过我觉得这没关系，因为这个搜索“插件”很简单，很小。

function openSearch() {
  document.getElementById("myOverlay").style.display = "block";
}

function closeSearch() {
  document.getElementById("myOverlay").style.display = "none";
}

.overlay {
  height: 100%;
  width: 100%;
  display: none;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9);
}

.overlay-content {
  position: relative;
  top: 46%;
  width: 80%;
  text-align: center;
  margin-top: 30px;
  margin: auto;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
  cursor: pointer;
  color: white;
}

.overlay .closebtn:hover {
  color: #ccc;
}

.overlay input[type=text] {
  padding: 15px;
  font-size: 17px;
  border: none;
  float: left;
  width: 80%;
  background: white;
  color:#333;
}


.overlay button {
  float: left;
  width: 20%;
  padding: 15px;
  background: #84bc3c;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.overlay button:hover {
  opacity:0.95;
}

#open_search { 
  cursor: pointer
}

<div id="myOverlay" class="overlay" onclick="closeSearch()">
  <span class="closebtn" onclick="closeSearch()" title="Bezárás">×</span>
  <div class="overlay-content">
    <form method="post">
      <input required="required" type="text" placeholder="Ide írja be a keresett termék nevét.." name="kereses" id="kereses">
      <button class="text-white" type="submit"><i class="fa fa-search text-white mr-2"></i></button>
    </form>
  </div>
</div>

【问题讨论】：

标签： javascript html css bootstrap-4

【解决方案1】：

我尝试在移动设备和 PC 上打开 span，效果很好。因此，我建议您尝试在手机上以隐身模式打开该网站，以确保缓存中没有任何内容。如果您可以指定您在手机上使用的浏览器以及它是什么版本，这也会很有帮助。

【讨论】：