Question

我对javascript不太满意...

我有一个下拉菜单，显示onmouseover或onclick，nd隐藏onmouseout或单击鼠标。

这是我的全部代码：

function montrerProduits(wouhou) {
  if (document.getElementById(wouhou).style.display == "none") {
    document.getElementById(wouhou).style.display = "inline";
  } else {
    document.getElementById(wouhou).style.display = "none"
  }
}

function hideProduits() {
  document.getElementById('wouhou').style.display = "none";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<li onmouseover="montrerProduits('wouhou')" onmouseout="hideProduits()" onclick="montrerProduits('wouhou')" onfocus="montrerProduits('wouhou')"><a>Créations</a>
  <div id="wouhou" style="display: none">
    *div things*
  </div>
</li>

我的问题是，页面加载后，在我的智能手机上（我在CSS中使用@media，不知道是否与此有关），当我第一次单击“Créations”时，没有任何反应。我必须再次单击以显示下拉菜单（#wouhou）。一旦我至少显示了一次，一次单击就足以再次显示它...

我花了很多时间阅读有关该问题的其他问题，并且了解到在第一次单击之前未调用该函数，因此最先单击仅调用该函数，但不执行onclick事件... < / p>

但是我对如何修复代码一无所知，因此，在页面加载后，只需单击一下即可显示我的下拉菜单...

在此先感谢您的回答，您一定会挽救我的生命（或至少是我的星期日），我将永远感激不已！

Answer 1

我的猜测是，它不起作用，因为每当您单击应该显示菜单的元素（您的“ li”标签）时，您实际上都会触发另一个事件，即“ onmouseover”事件。

之所以可以这样操作是因为智能手机不需要用户“物理”移动任何设备来实际移动光标。因此，每当您单击手机屏幕时，它将首先在您刚刚单击的位置上的元素上触发鼠标悬停事件。那么只有它会触发onclick事件。在您的情况下，这意味着您的函数“ montrerProduits”将被触发两次，您甚至没有时间看到菜单显示。

我不是智能手机的大用户，我很少在智能手机上测试我的代码，但是如果我没有记错的话，那么在使用鼠标的情况下，您的代码应该可以在普通计算机上正常工作。

解决您的问题的方法是删除“ li”元素的“ onemouseover”事件，然后它应在智能手机上正常运行。另一方面，每次用户将鼠标悬停在元素上时，您都将无法显示菜单。如果您想同时保留两个事件，可以采取以下措施：

var changeDisplay = true; 
function montrerProduits(wouhou) {
   if(changeDisplay) {
     //Prevent new display changes
     changeDisplay = false;
     if (document.getElementById(wouhou).style.display == "none") {
       document.getElementById(wouhou).style.display = "inline";
     } else {
       document.getElementById(wouhou).style.display = "none";
     }
   }
   //Enable display changes to be made again after 0.25 second
   setTimeout(function(){ changeDisplay = true; }, 250);
}

Answer 2

尝试更早和/或使用

添加自定义脚本标签。

<body onload="script();">

实际附加听众

第一次执行onclick需要2次点击

2 个答案: