本文介绍了Webkit意外触发mousemove事件(鼠标不动)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个幻灯片播放,滚动一个div来显示幻灯片中的下一张照片。我还有一个功能设置,当鼠标处于非活动状态时隐藏照片描述,但是当鼠标移动时显示描述。

I have a slideshow playing that scrolls a div to reveal the next photo in the slideshow. I also have a function set up that hides the photo description when the mouse is inactive, but shows the description when the mouse moves.

在Firefox中,没有问题, div滚动到新照片,没有触发mousemove事件。但是,在Webkit中,鼠标在窗口上,但不活动,每当div滚动到一张新照片时,就会触发两到三个mousemove事件。

In Firefox, there is no problem, the div scrolls to new photos and no mousemove event is fired. However, in Webkit with the mouse on the window, but inactive, two-three mousemove events are fired everytime the div scrolls to a new photo.

这是你的网站看一下。在webkit浏览器中导航到投资组合页面(我打开控制台打开),当照片循环播放时,该页脚应保持隐藏状态。

Here's the website for you to have a look. Navigate to the portfolio page in a webkit browser (with a console open I suppose) and that footer should stay hidden while the photos cycle through. http://96.0.13.132/

推荐答案

是的,webkit浏览器就是这样做的,我认为每个浏览器都应该这样做。因为滚动后光标 IS 处于不同的位置,这可以避免我作为开发人员的许多问题。

Yes, webkit browsers do that, and i think every browser should. Because the cursor IS in a different position after the scrolling, and that could avoid me a lot of problems as a developer.

无论如何,如果你想避免它在你的脚本中的后果,只需记录最新的clientX和clientY位置,并检查自上次mousemove以来这些是否有所改变;类似这样的事情:

Anyway, if you want to avoid its consequences in your script, just log the latest clientX and clientY position and check if those have changed since the last "mousemove"; something like this:

window.addEventListener("mousemove",function(e){
    if(window.lastX !== e.clientX || window.lastY !== e.clientY){
        // Code when the (physical) mouse actually moves
    }
    window.lastX = e.clientX
    window.lastY = e.clientY
})

这篇关于Webkit意外触发mousemove事件(鼠标不动)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-03 15:20