如何在mouseDown按下js时实现mousemove答案

【问题标题】：how to implement mousemove while mouseDown pressed js如何在mouseDown按下js时实现mousemove
【发布时间】：2015-06-13 10:19:45
【问题描述】：

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

只有当鼠标按下并移动时，我才需要执行“OK Moved”。

我用过这段代码

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

【问题讨论】：

标签： javascript jquery mouseevent mousemove mousedown

【解决方案1】：

使用mousemove 事件。

来自mousemove 和mouseover jquery 文档：

当鼠标指针在元素内移动时，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/

【讨论】：

当您第一次单击该框并移动鼠标时它工作得很好，但是当您再次移动鼠标时没有按下按钮它也可以工作！这就是我所遭受的： 3 。我只需要在鼠标按下和移动时工作。
已编辑：离开盒子时也需要解绑。现在它应该只在您在框内按下鼠标并在里面移动时才起作用。

【解决方案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); }
);

（注意：在上面的示例中，您不需要该函数 - 您可以将其称为 mouseMoveWhilstDown(document.getElementById('move'), console.log)，但您可能想要对它做一些事情而不是将其输出到控制台！）

【讨论】：

【解决方案3】：

默认行为将停止 mouseMove 和 mouseUp 运行，您可以通过在 mousedown 函数中添加 event.preventDefault() 来解决这个问题

请确保您使用在 mousedown 函数中传递的相同参数名称来触发 preventDefault() 否则它将不起作用，在下面的示例中，我将 event 作为参数传递给 mousedown 函数，然后触发 preventDefault()通过输入 event.preventDefault()

let sliderImages =  Array.from(document.getElementsByClassName('slidess'));
const sliderPos = sliderImages.forEach( function (slide, index) {

    let mousePosStart, isDown = false;

    slide.addEventListener('mousedown', mousedown)
    slide.addEventListener('mousemove', mousemove)
    slide.addEventListener('mouseup', mouseup)

function mousedown(event) {
    if (isDown == false) {
        mousePosStart = event.pageX - this.offsetLeft;
        isDown = true;
        event.preventDefault();
    }
}

function mousemove(event) {
    if (isDown == true) {
        let mousePosMove = event.pageX - this.offsetLeft;
    }
}

function mouseup(event) {
    if (isDown === true) {
        isDown = false;
        let mousePosEnd = event.pageX - this.offsetLeft;
    }
}

});

【讨论】：