近日測試小姐姐給我提了一個bug,場景是一個顯示航規的彈框，鼠標放上去，顯示彈框，鼠標移開，彈框關閉。因為航規需要區分往返，所以我在彈框里面引入了element ui的tab組件，然后問題粗來了，測試小姐姐在彈框里面點擊切換時，偶現彈框就突然關了（此時鼠標是沒有離開的，不應該觸發mouseleave事件啊）
然后我開始以為是tab組件的鍋，找了相關資料還是沒想到是什么原因。解決問題最直接的方法是簡化，所以我就把tab組件給刪了，做了個小測試，代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>v-model</title> </head> <body> <div id="app"> <p @click="createMask" @mouseleave="testFn" style="width:200px;height:200px;background:pink">test</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script> <script> var vm = new Vue( { el: '#app', methods: { createMask() { console.log('點擊') }, testFn() { console.log('點擊過程觸發mouseleave事件') } }, } ); </script> </body> </html>
結果發現當你數次點擊一個元素多次后，會偶爾觸發mouseleave事件，但是這個事件有一個特點和正常觸發的mouseleave事件不同，就是該事件的relatedTarget屬性為null， 而正常觸發的mouseleave事件在這個屬性上則會指向一個對象即觸發事件時鼠標所在元素對象