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

Question

我不太擅长 javascript...

我有一个下拉菜单，显示 onmouseover 或 onclick，并隐藏 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 事件.. .

但我完全不知道如何修复我的代码，因此在页面加载后只需单击一次就足以显示我的下拉菜单...

预先感谢您的所有回答，您一定会挽救我的生命（或者至少是我的星期天），我将永远感激不已！

Answer 1

尝试使用

更早地添加您的自定义脚本标签 and/or

<body onload="script();">

实际附加听众

Answer 2

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

它可能以这种方式工作的原因是因为 smartphones 不需要他们的用户 "physically" 移动任何设备来实际移动光标。因此，每当您单击 phone 的屏幕时，它会首先在位于您刚刚单击的位置的元素上触发鼠标悬停事件；那么只有它会触发 onclick 事件。在你的情况下，这意味着你的函数 "montrerProduits" 将被触发两次，你甚至没有时间看到你的菜单出现。

我不是 smartphones 的大用户，我很少在它们上测试我的代码，但如果我没记错的话，你的代码在使用鼠标.

您的问题的解决方案是删除 "li" 元素的 "onemouseover" 事件，然后它应该可以在 smartphones 上正常工作。另一方面，每当用户将鼠标悬停在元素上时，您将失去显示菜单的可能性。如果你想保留这两个事件，你可以这样做：

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

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

2 clicks needed to execute onclick the first time

html

javascript

click

onclick

display