Javascript 鼠标停止后的触发代码

我有一个在鼠标输入时触发的代码块。我还有一段代码，可以检测鼠标何时停止移动

我希望mouseenter代码仅在鼠标停止在输入对象内移动时运行

// Add events to each dot
for (var i = 0; i < dots.length; i++) {
  dots[i].addEventListener('mouseenter', function (event) {
    var target = event.target;

    // Add a class called moving when follow dot is in a transition
    followDot.classList.add('moving');

    targetsPosition[0] = target.style.left;
    targetsPosition[1] = target.style.top;

    // Detect if the dot is moving left or right
    if (followDot.style.left < targetsPosition[0]) {
      removeMovingClasses();
      followDot.classList.add('moving-right');
    } else if (followDot.style.left > targetsPosition[0]) {
      removeMovingClasses();
      followDot.classList.add('moving-left');
    }

    //
    followDot.style.left = targetsPosition[0];
  });
}

---

尝试此解决方案您可以在鼠标在

div上空闲时触发事件，例如在特定时间段内

HTML:

JavaScript:

idleTimer = null;
idleState = false;
idleWait = 2000;

(function ($) {

$(document).ready(function () {
var $sample = $("#sample");
    $('*').bind('mousemove keydown scroll', function () {

        clearTimeout(idleTimer);

        if (idleState == true) { 

            // Reactivated event
            if($sample.is(":hover")) {
                            alert('mouse has moved again');
                        }

        }

        idleState = false;

        idleTimer = setTimeout(function () { 

            // Idle Event
            if($sample.is(":hover")) {
                            alert('mouse has stopped for two seconds');
                        }

            idleState = true; }, idleWait);
    });

    $("body").trigger("mousemove");

});
}) (jQuery)

您可以将
idleWait
变量更改为所需的时段（本例中为2秒）


我希望它对你有用：）
一切看起来都很好，你只需要做一点小小的改变。尝试将mousemove事件添加到目标区域，而不是文档（除非它是整个文档）。此外，还应该将第一个块包装到一个函数中，以便在鼠标停止后调用

范例

function mouseHasStopped(){
//code in first block...
}

//adding an event listener to whatever element is entered . in this example i'm using "element" as our entered object ...

element.addEventListener("mousemove",function(){

    clearTimeout(timeout);
    timeout=setTimeout(mouseHasStopped,300);
});

希望这有助于定义“最佳”。。。这不起作用吗？检测鼠标何时停止起作用。但是，除非鼠标停止，否则我不希望第一个块中的代码运行。我不确定如何将两者结合起来。您试图达到的效果是什么？除非鼠标在鼠标输入的对象内停止移动，否则我不希望鼠标指针触发。感谢您花时间回复。我已经能够让它在一个标准项目上工作，但是我在将它与上面粘贴的第一个代码块合并时遇到了问题。我还将此作为更熟悉vanilla JS的一种方式，因此我不想使用jQuery。
#sample {
    width:200px;
    height:200px;
    background: #aaa;
}

idleTimer = null;
idleState = false;
idleWait = 2000;

(function ($) {

$(document).ready(function () {
var $sample = $("#sample");
    $('*').bind('mousemove keydown scroll', function () {

        clearTimeout(idleTimer);

        if (idleState == true) { 

            // Reactivated event
            if($sample.is(":hover")) {
                            alert('mouse has moved again');
                        }

        }

        idleState = false;

        idleTimer = setTimeout(function () { 

            // Idle Event
            if($sample.is(":hover")) {
                            alert('mouse has stopped for two seconds');
                        }

            idleState = true; }, idleWait);
    });

    $("body").trigger("mousemove");

});
}) (jQuery)

function mouseHasStopped(){
//code in first block...
}

//adding an event listener to whatever element is entered . in this example i'm using "element" as our entered object ...

element.addEventListener("mousemove",function(){

    clearTimeout(timeout);
    timeout=setTimeout(mouseHasStopped,300);
});