元素移动后鼠标hover效果不消失的问题解决方案分析 |
您所在的位置：网站首页 › qq留言板内容突然消失了 › 元素移动后鼠标hover效果不消失的问题解决方案分析 |
|
问题描述
MacBook Pro (13-inch, 2017, Two Thunderbolt 3 ports) OS: 10.14.5 (18F132) Chrome: 79.0.3945.88 test .hover:hover { color: blue; }鼠标移动在该div元素上，点击后通过js移动此元素至别处，使鼠标不再hover，此时该div仍然保持了原来的hover state，当鼠标再次被用户移动时hover效果才会消失。 大胆猜测css的hover触发可能是通过MouseEvent（MouseOver）事件触发的，在浏览器的事件机制实现上存在（ReadOnly）isTrusted属性：event.isTrusted，在由用户自身鼠标操作生成的事件此属性为true，由script自行dispatch的此属性为false。 大胆猜测hover效果的保持是因为元素移动是由脚本自行触发的，从而事件的isTrusted为false，从而没有触发hover的移除效果。 小心求证 this.$el.querySelector('.hover').addEventListener('mouseover', evt => { console.log('hovering', evt); }); this.$el.querySelector('.hover').addEventListener('mouseenter', evt => { console.log('mouseenter', evt); }); this.$el.querySelector('.hover').addEventListener('mouseleave', evt => { console.log('mouseleave', evt); }); this.$el.querySelector('.hover').addEventListener('mouseout', evt => { console.log('mouseout', evt); });通过给该元素添加对应的鼠标事件可以发现触发顺序为：over->enter->out->leave 点击该元素使其移动时发现只触发了over->enter事件，其他两个事件等自己移动鼠标时才触发… 猜测暂时无法证实—根本就没有触发mouseout和mouseleave事件… 解决办法想到了一个比较hack的解决方案：点击事件的同时给元素添加一个动画： @keyframes recoverMouseEvt { 0% { pointer-events: none; } 100% { pointer-events: initial; } }动画开始时候移除鼠标事件，从而使hover效果消失，在动画结束之后再恢复鼠标事件。 遗留问题FireFox上这个还是不好使– |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |