点击事件触发mouseleave事件

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

转载于:https://www.cnblogs.com/Tiboo/p/10628331.html

点击事件触发mouseleave事件相关推荐

c# Gridview 点击checkbox 触发的事件
今天介绍下gridview中点击checkbox触发的事件,包括全选. 声明下,gridview中的checkbox不是在gridview设计器里面添加的,而是在gridview的属性中设置出来的,具 ...
事件触发过程(事件流)
事件触发过程(事件流) 首先一个点击事件,事件会## 标题从最外层开始发生,到目标源,这个过程叫做事件捕获,事件再会从目标源最深的节点开始发生,一直向上传播,直到document对象,这个过程叫做事件 ...
mouseover事件和mouseenter事件以及mouseleave事件和mouseout事件的区别
1.mouseover事件与mouseenter事件 mouseover事件:不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. mouseenter事件:只有在鼠标指针穿过被选 ...
JavaScript 技巧篇-js增加延迟时间解决单击双击事件冲突，双击事件触发单击事件
js 的单双击事件同时存在会有一个问题:双击事件会同时触发单击事件,两个事件存在冲突. 我们加一个延迟时间就能很好的解决这个问题. 原理: 当接收到第一个点击时,我们先把单击事件存储在这个是全局变量 ...
C# TreeView 连续点击不触发AfterCheck事件
创建一个类 TreeView2 namespace System.Windows.Forms {public class TreeView2 : TreeView{protected override ...
将文字置于图片之上，防止鼠标频繁交替触发mouseenter和mouseleave事件
问题描述: 使用标准文档流进行布局,鼠标会频繁触发 mouseenter 和 mouseleave 事件,无法正常修改 spsan 的位置. 该问题需将文字(即 li)置于图片(即 span)之上,防 ...
Asp.Net GridView点击/选中单行触发SelectedIndexChanged事件
// RowDataBound(行数据绑定事件) protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e ...
记录一个坑：mouseleave事件
今天在做一个弹出式下拉框时遇到了一个BUG,如下图所示,我下拉框中加入一组多选多选框,并且设置当用户的鼠标移出多选框部分的div时,多选框隐藏,这个时候当然是选择使用mouseleave事件来实现最好 ...
1、交互优化(防抖与节流、MouseEnter 和 mouseLeave事件)
需求:二级菜单的显示与隐藏.鼠标移到一级菜单上,会显示二级菜单,移出元素时,二级菜单则会隐藏. 有以下三种实现方法 1.首先我们想到的是通过js的鼠标事件来进行处理,那么我们应该先明确一下几个事件的基 ...

点击事件触发mouseleave事件

点击事件触发mouseleave事件相关推荐

最新文章

热门文章