记录一个坑：mouseleave事件

今天在做一个弹出式下拉框时遇到了一个BUG，如下图所示，我下拉框中加入一组多选多选框，并且设置当用户的鼠标移出多选框部分的div时，多选框隐藏，这个时候当然是选择使用mouseleave事件来实现最好啦。

可是不久后问题就来了：当我在多选框中选择项目时，时不时就会触发mouseleave事件，导致用户选着选着多选框消失，用户体验极差啊；仔细观察后，发现好像我在checkbox上的双击时，会偶然性的触发mouseleave事件，感觉就像抽奖一样。。

这是页面上显示的样式

dom结构

在经历数次搜索后，我决定看看外国人怎么解决这一问题,结果还真让我找到了：

https://stackoverflow.com/questions/47649442/click-event-effects-mouseenter-and-mouseleave-on-chrome-is-it-a-bug

I can confirm the behaviour on chrome (Version 62.0.3202.94).

When clicking an element multiple times, occasionally mouseleave is fired with a relatedTarget/toElement property of "null" on the MouseEvent (screenX, screenY properties both 0).

The behaviour is random, sometimes it needs 2 subsequent clicks, sometimes more than 20. Clicking speed/rate seems irrelevant too.

By now I avoid the execution of unwanted code in my onMouseLeave(event) method by checking the relatedTarget property of the event(if "null" do nothing). Don't know if there is another useful case where relatedTarget could be null...

这里说到：当你数次点击一个元素多次后，会偶尔触发mouseleave事件，但是这个事件有一个特点和正常触发的mouseleave事件不同，就是该事件的relatedTarget属性为null，而正常触发的mouseleave事件在这个属性上则会指向一个对象即触发事件时鼠标所在元素对象；

这是出现bug时的mouseleave事件

这个是正常的鼠标移开元素触发的mouseleave事件

到这里问题解决方案就变得很清晰了，我只要对mouseleave事件进行一下过滤，只对正常触发的mouseleave事件进行响应，即可完美解决这个问题：

总结：自己对底层一些的知识还太过小白，以后真的要多加训练。

记录一个坑：mouseleave事件相关推荐

记录一个坑的解决历程
声明一个按钮属性: @property(nonatomic,strong)UIButton *valueBtn; 复制代码在页面初始化地方创建按钮: self.valueBtn = [[UIButt ...
记录一个坑:java.util.zip.ZipException: zip file is empty
接手一个离职同事的项目,运行起来没问题但是kotlin还用的是 1.3.70版本,这都2021年了,还用这么低版本果断换成1.5.30版本,同步一下没问题,运行~~~~~~ java.util.zi ...
记录一个坑：ValueError: Colormap spectral is not recognized.
我按照书上的代码敲上去是这样的. ValueError Traceback (most recent call last) <ipython-input-16-306c0fd67636> ...
关于Openlayers Overlay事件监听的一个坑
一.问题产生: 我使用Overlay创建标绘操作的小方块元素,如下代码和如图. 然后我监听小方块的mousedown事件.用原始的事件监听: element.addEventListener('mou ...
事件溯源|日志记录-一个基础的微服务模式
导语: 微服务架构目前是各互联网系统架构的首选,在使用微服务的过程中,调试一个分布式系统是一项具有挑战的任务, 事件溯源是一种非常好的方式来解决微服务可见性的一种手段.且看大名鼎鼎的couchbase ...
关于一个Panel上鼠标不及时响应MouseLeave事件
今天做一个鼠标离开panel后,该panel消失的功能,具体就是,使用panel.MouseLeave事件.但是调试中发现这个事件执行的并不及时,有时鼠标都离开了,panel依然没有消失.经过查资料, ...
记录我开发工作中遇到HTTP跨域和OPTION请求的一个坑
我通过这篇文章把今天工作中遇到的HTTP跨域和OPTION请求的一个坑记录下来. 场景是我需要在部署在域名a的Web应用里用JavaScript去消费一个部署在域名b的服务器上的服务.域名b上的服务也 ...
记录一个C++多线程的坑
记录一个C++多线程的坑 VS2019报错解决方案: 错误代码修改方案: 写在最后,发牢骚 VS2019报错 1>C:\Program Files (x86)\Microsoft Visua ...
再次记录 Visual Studio 2015 CTP 5 的一个坑
升级到 VS2015 CTP 之后,今天要改项目中的一个东西,然后就不得不把 C# 6.0 改变的语法代码中改了下(之前没改,大约200多个),首先,比如下面示例代码: var fullName = ...

记录一个坑：mouseleave事件

记录一个坑：mouseleave事件相关推荐

最新文章

热门文章