Question

当用户将鼠标悬停在div元素上并且他们将鼠标移动到元素上时，我会触发一个事件。但是，当鼠标停止移动时，我似乎找不到触发事件的方法。例如，我正在处理的事件检查用户是否将鼠标悬停在div上，如果是，则显示另一个元素并跟随鼠标。当用户离开div时，隐藏显示的元素。它现在的工作方式是，我显示的元素显示并跟随鼠标在鼠标周围，但它并不完全是我想要的。我希望鼠标移动时不显示，但鼠标停止移动时显示。

HTML

<div class="tooltip"><p></p></div>
<div class="holder" id="1"></div>
<div class="holder" id="2"></div>

CSS

.holder{
    display: block;
    float: left;
    margin-bottom: 0.25%;
    width: 100%;
    height: 200px;
    cursor: pointer;
    border-top: 1px solid rgb(100, 100, 0);
    border-bottom: 1px solid rgb(100, 100, 0);
}
.tooltip{
    position: absolute;
    display: none;
    width: 150px;
    background-color: white;
    z-index: 5;
}

JS

var holder = document.getElementsByClassName("holder");
var tooltip = document.getElementsByClassName("tooltip")[0];
for(var i = 0; i < holder.length; i++){
    var moving;
    holder[i].onmouseover = function(ev){
        moving = false
        tooltip.style.display = "block";
        tooltip.style.top = ev.clientY;
        tooltip.style.left = ev.clientX;
    }
    holder[i].onmouseout = function(ev){
        moving = false
        tooltip.style.display = "none";
        tooltip.style.top = ev.clientY;
        tooltip.style.left = ev.clientX;
    }
    holder[i].onmousemove = function(ev){
        moving = true;
    }

    if(moving){
        tooltip.style.display = "none";
        tooltip.style.top = ev.clientY;
        tooltip.style.left = ev.clientX;
    }
}

Answer 1

调用onmousemove时，一个简单的方法就是设置一个计时器。当计时器到期时，进行隐藏。再次调用onmousemove时，请重置计时器的超时时间。

该应用程序判断是否有人停止移动鼠标。从技术上讲，鼠标的连续移动转换为每个像素的鼠标移动事件。

你需要做一点聪明，因为onmousemove会被调用很多。也许是这样的：

var mouseStartedMoving = false;
var mouseMoved = false;
const MINIMUM_MOUSE_MOVE_TIME = 100;

setInterval(() => { 
   if(!mouseMoved && mouseStartedMoving) {
       //Mouse stopped moving
       //Do CSS change
       mouseStartedMoving = false;
   }
   mouseMoved = false;
}, MINIMUM_MOUSE_MOVE_TIME);

holder[i].onmousemove = function(ev){
  mouseStartedMoving = true;
  mouseMoved = true;
}

Answer 2

您可以使用“setTimeout”功能执行此操作。

当您跟踪鼠标移动时，将“mouseMoved”设置为当前毫秒。然后你做这样的事情：

setTimeout(function(){ 

    var now = new Date();
    var nowMillis = d.getMilliseconds();
    var timeDiff = nowMillis - mouseMoved;
    if (timeDiff > 3000)
        alert("mouse stopped moving for 3 seconds"); 
}, 3000);

当鼠标停止移动时是否可以触发事件？

2 个答案: