為什么 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

}