点击事件触发mouseleave事件

最新推荐文章于 2023-11-24 16:04:33 发布

weixin_33737134

最新推荐文章于 2023-11-24 16:04:33 发布

阅读量872

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Tiboo/p/10628331.html

版权

近日测试小姐姐给我提了一个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>