为什么 mouseleave 事件被自动完成输入触发

Question

我有一个带有事件 mouseleave 附加到它的 div。 div 内部有一个表单。

<div class='dropdown'>
 <form>
   <input type='email' name='email' placeholder='email'/>
 </form>
</div>

当我单击输入并且浏览器显示自动完成列表时，问题就来了。

如果我将 cursor 移动到 select 正确的 email。mouseleave 触发事件，但我没有离开 div，我只是因为自动完成似乎是浏览器外部的东西，所以我得到了这种不希望的行为。

关于如何检测这种情况的任何建议？

我只需要香草 javascript 响应（但如果你有 jquery 方法就可以了，所以我可以检查后面的代码）

提前致谢

Answer 1

如果您有有效的代码片段，那将会很有帮助。 考虑到您提供的信息，让我总结一下问题。

1. 您有一个 div 元素，您可以在其中监视鼠标事件，并在启用自动完成的 div 中有 input 元素。
2. 每次与自动完成下拉菜单交互时，它都会触发鼠标离开事件。

虽然你的目标是：

1. 仅当用户将鼠标拖到您的 div 元素之外时才触发鼠标离开事件

您的问题有两种解决方案：

1. 禁用输入的自动完成
2. 如果您希望在输入时自动完成。 您需要考虑更改要监视的鼠标事件。 您应该监视“mouseout”而不是“mouseleave”事件。 请参考以下链接以了解“mouseout”与“mouseleave”之间的区别： w3schools 。 TLDR：当鼠标指针离开任何子元素以及所选元素时，会触发 mouseout 事件。

请参阅以下代码片段以了解解决方案 #2。

 function generateHappyMeals (nodeName) { console.log('HAPPY MEALS from', nodeName); }; function MouseTrack(e) { // Target nodeName represent the node name of the target element // Based on HTML example, when you move out your cursor, you should have three nodenames: DIV, FORM, INPUT which represent the target element that triggers the MouseTrack function. const nodeName = e.target.nodeName; // console.log(nodeName); if (nodeName === 'DIV') { // Do something when mouse event triggered by #card div element //....example: generateHappyMeals(nodeName); } }; document.querySelector('#card').addEventListener('mouseout', MouseTrack);

 #card { background-color: gainsboro; padding: 36px; }

 <div id='card'> <form> <input type='email' name='email' placeholder='email'/> </form> </div>

快乐黑客！

Answer 2

我仍然会使用 mouseleave 侦听器，但仅当鼠标坐标在框外时才隐藏下拉列表。

<div class='dropdown' id="login">
 <form>
   <input type='email' name='email' placeholder='email'/>
 </form>
</div>

<script>
   const loginBox = document.getElementById('login');
   loginBox.addEventListener("mouseleave", function(event){
        const wrapperBounding = loginBox.getBoundingClientRect();
        if (event.clientX >= loginBox.left && event.clientX <= loginBox.right &&
            event.clientY >= loginBox.top && event.clientY <= loginBox.bottom) {
            return
        }
        
        hideDropdown(); 
  });
</script>

这将确保下拉菜单仅在鼠标实际移出时才会消失。 它还将防止您的下拉菜单因其他插件而关闭，请参阅如何防止鼠标离开插件图标？

Answer 3

我发现在使用 mouseleave() 事件时，将 cursor 移动到自动填充弹出窗口时，事件属性中的“toElement”为 null。 将 cursor 移动到您网站的其他任何位置时，情况不应如此。

因此，如果 mouseleave() 事件只应在将您的 cursor 移动到您网站上的其他位置时发生，并且它是否在“外部”到任何浏览器创建的元素（如自动填充或标签栏）并不重要，那么这将起作用，就像我一样:

mouseLeaveEvent(e) {

   if (e.toElement === null) {
       return
   }

   // Your code here

}