当mouseDown按下js时如何实现mousemove

Question

我必须在按下鼠标时才实现鼠标移动事件。

我只需要在鼠标移动和鼠标移动时执行“OK Moved”。

我用过这段代码

 $(".floor").mousedown(function() {
  $(".floor").bind('mouseover',function(){
      alert("OK Moved!");
  });
})
.mouseup(function() {
 $(".floor").unbind('mouseover');
});

Answer 1

使用mosemove事件。

来自mousemove和mouseover jquery docs：

当鼠标指针在元素内移动时，mousemove事件被发送到元素。

当鼠标指针进入元素时，mouseover事件被发送到元素。

示例:(检查控制台输出）

$(".floor").mousedown(function () {
    $(this).mousemove(function () {
        console.log("OK Moved!");
    });
}).mouseup(function () {
    $(this).unbind('mousemove');
}).mouseout(function () {
    $(this).unbind('mousemove');
});

https://jsfiddle.net/n4820hsh/

Answer 2

在纯JavaScript中，您可以实现此目的

function mouseMoveWhilstDown(target, whileMove) {
    var endMove = function () {
        window.removeEventListener('mousemove', whileMove);
        window.removeEventListener('mouseup', endMove);
    };

    target.addEventListener('mousedown', function (event) {
        event.stopPropagation(); // remove if you do want it to propagate ..
        window.addEventListener('mousemove', whileMove);
        window.addEventListener('mouseup', endMove);   
    });
}

然后使用沿线的功能

mouseMoveWhilstDown(
    document.getElementById('move'),
    function (event) { console.log(event); }
);

（nb：在上面的示例中，您不需要该函数 - 您可以将其称为mouseMoveWhilstDown(document.getElementById('move'), console.log)，但除了将其输出到控制台之外，您可能希望对其执行某些操作！）