近日测试小姐姐给我提了一个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事件在这个属性上则会指向一个对象即触发事件时鼠标所在元素对象