拖动鼠标事件抖动鼠标移动

Drag mouse events jittery - onmousemove

本文关键字：鼠标 移动 抖动 事件 拖动      更新时间：2023-09-26

通过youtube为无铬播放器制作磨砂条。我有我喜欢的功能，但当我点击拖动蓝色"seeker"按钮并拖动它时，它会跳回原来的位置，直到我释放鼠标点击。一旦我发布，它就会在适当的位置启动视频，并在适当的地方绘制进度条。代码在这里：http://jsfiddle.net/VysBU/1/

我还记录了鼠标的位置和进度条的宽度（这是跳跃的部分），宽度值在拖动时一直向上或向下移动，这没有意义，因为在视觉上，它来回跳跃。古怪的

任何帮助都将不胜感激。。。如果你需要我澄清什么，请告诉我。

注意：刚刚记住。。。它倾向于仅在垂直鼠标移动时跳跃。也就是说，如果我在不改变垂直位置的情况下水平移动鼠标，它会很好地"动画化"。如果垂直位置确实移动，则"动画"不稳定。

看看这个http://jsfiddle.net/sz4FF/

你需要停止的间隔

setInterval(animateProgress, 100);

当你开始寻找时，当寻找停止时继续寻找。它之所以会跳跃，只是因为调用了animateProgress并设置了播放的Bar和seeker的宽度。

我匆忙地将它添加到一个全局函数（window.TEST_INTERVAL）中，只是为了检查它是否工作，它确实工作了。

（如何初始化和清除间隔）

clearInterval(TEST_INTERVAL);
TEST_INTERVAL = setInterval(animateProgress, 100);

内寻

function seeking(e){
        clearInterval(TEST_INTERVAL);

在doneSearching 内

function doneSeeking(e){
         TEST_INTERVAL = setInterval(animateBuffer, 250);

更新：IE8及以下问题

    mousePos  = e==undefined ? event.clientX : e.pageX;
    //get the position of the mouse
    //mousePos = e.pageX;

onmousemove返回的事件在ie7和ie8中是"未定义的"，这样我们就可以检查window.event.clientX，它显示了鼠标相对于窗口的位置。它似乎工作得很好，但我相信在正常环境中可能需要一些小的调整

相关文章：