IE中，鼠标移入元素连续触发mouseenter和mouseleave

zc的救赎 2017-03-03 05:37:18

想实现一个面板，当鼠标移入时显示，鼠标离开时隐藏，为避免冒泡，使用了JQ的mouseenter和mouseleave，在其他浏览器没有问题，但是在IE中，当鼠标移入的时候，先是触发mouseenter，紧接着就触发mouseleave，导致面板显示不出来。按理说鼠标移入元素不可能触发mouseleave的啊？于是打断点，发现此时的jq event属性clientX和clientY都为-1，我的鼠标是在屏幕中部，怎么会变负数呢？offsetX也变成了-886，鼠标刚移进元素，怎么会距离元素的位置的这么远？请哪位大神解惑。

...全文

340 4 打赏收藏转发到动态举报

写回复

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

weixin_42053714 2020-07-17

打赏
举报

回复

写兼容ie的代码

zc的救赎 2017-03-06

打赏
举报

回复

已经解决了，虽然不知道为什么IE中在鼠标刚移入元素的时候会触发mouseleave，但是此时鼠标相对于客户区域的坐标是在外面的。所以会出现clientX = -1；还遇到一个问题就是IE中透明背景竟然也会触发mouseleave，后来加了1*1的透明图片才不会触发。

Go 旅城通票 2017-03-03

打赏
举报

回复

offset改client试试

mouseover：当鼠标移入元素或其子元素都会触发事件，所以有一个重复触发，冒泡过程。对应的移除事件是mouseout mouseenter:当鼠标移除元素本身（不包含元素的子元素）会触发事件，也就是不会冒泡，对应的移除事件是mouseleave 异同体现在两个方面： 1. 是否支持冒泡 2.事件的触发时机 mouseenter事件的情况当鼠标从元素的边界之外移入元素的边界之内时，事件被触发。而鼠标本身在元素边界内时，要触发该事件，必须先将鼠标移出元素边界外，再次移入才能触...

翻阅红宝书我们可得： mouseenter——在鼠标光标从元素外部首次移动到元素范围之内时触发。 mouseleave——在元素上方的鼠标光标移动到元素范围之外时触发。 mouseout——在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发。移入的另一个元素可能位于前一个元素的外部，可能是这个元素的子元素。 mouseover——在鼠标位于一个元素外部，然后用户将其首次移入另一个元素之内时

mouseenter(进入)、mouseleave、mouseover(覆盖)和mouseout是常用来判断鼠标移出和移入的事件句柄，虽然功能上差不多，但是细节却有不同的地方。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>随风丶逆风&l...

当鼠标点击或者触发dom事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话，会先触发父元素绑定的事件。2、mouseenter和mouseleave 事件不会冒泡，依旧是说鼠标移入、移出时，该元素的子元素或父元素不会触发该事件。1、mouseover和mouseout会有事件冒泡，也就是说鼠标移入、移出当前元素的子元素或父元素时都会触发该事件。：与事件捕获恰恰相反，事件冒泡顺序是由内到外进行事件传播，直到根节点。false：冒泡阶段。

项目中遇到个问题：在监听鼠标移入移出事件时有时会因为鼠标在移入的元素中进行了点击就自行触发了鼠标移出事件，很不得解。打印出event对象发现，因为多次点击触发的mouseleave事件和正常触发的mouseenter事件有一个区别：其relatedTarget属性（ie中是toElement）值不同。多次点击触发的鼠标移出事件的这一属性值为null；正常触发的则会是鼠标移出元素后所悬浮于上的DOM对象；以上~待深究…… ...

87,904

社区成员

224,614

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章