如何在鼠标按下的情况下实现JavaScript中的mousemove

Question

如何在鼠标按下的情况下实现JavaScript中的mousemove

javascriptjquerymouseeventmousemovemousedown

16

只有当鼠标按下时，我才需要实现鼠标移动事件。

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

我使用了这段代码：

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

- M1M6

4个回答

11

在纯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) 调用，但您可能想要做一些与之不同的事情！)

- Algy Taylor

这个解决方案很棒，谢谢（+1） - 0x00001F

这是非常优雅的代码，我甚至没有在寻找解决这个问题，但我肯定会在未来使用它。 - klaytonme

这个持续不断，即使不再按下鼠标或移动鼠标。 - Sven Cazier

4

我知道这个问题大约七年前已经提交并解决了，但现在有一个更简单的解决方法：

element.addEventListener('mousemove', function(event) {
 if(event.buttons == 1) {
  event.preventDefault();

  // Your code here!

 }
});

或者适用于触摸设备：

element.addEventListener('touchmove', function(event) {
 if(event.touches.length == 1) {
  event.preventDefault();

  // Your code here!

 }
}

要了解更多关于 MouseEvent.buttons 的信息，请单击此处访问MDN Web Docs。然而，与鼠标事件不同，触摸设备通常会侦听TouchEvent。 TouchEvent.touches.length 可以实现与 MouseEvent.buttons 类似的效果。

为了提供示例，我使用以下代码移动了一个创建的元素。为了移动元素，我使用了 'mousemove' 事件的 MouseEvent.movementX 和 MouseEvent.movementY 简化了代码。'touchmove' 事件没有这些属性，因此我存储了先前的触摸坐标，并在 'touchstart' 上将其清除。如果需要，您可以对 'mousemove' 事件执行类似操作，因为 movementX 和 movementY 值可能在不同的浏览器中有所不同。

document.addEventListener('DOMContentLoaded', () => {

 var element = document.getElementById('box');
 element.style.position = 'fixed';

 // MouseEvent solution.
 element.addEventListener('mousemove', function(event) {
  if(event.buttons == 1) {
   event.preventDefault();
   this.style.left = (this.offsetLeft+event.movementX)+'px';
   this.style.top = (this.offsetTop+event.movementY)+'px';
  }
 });

 // TouchEvent solution.
 element.addEventListener('touchstart', function(event) {
  /* Elements do not have a 'previousTouch' property. I create
     this property during the touchmove event to store and
     access the previous touchmove event's touch coordinates. */
  delete this.previousTouch;
 });
 element.addEventListener('touchmove', function(event) {
  if(event.touches.length == 1) {
   event.preventDefault();
   if(typeof this.previousTouch == 'object') {
    this.style.left = (this.offsetLeft+event.touches[0].pageX-this.previousTouch.x)+'px';
    this.style.top = (this.offsetTop+event.touches[0].pageY-this.previousTouch.y)+'px';
   }
   this.previousTouch = {
    x: event.touches[0].pageX,
    y: event.touches[0].pageY
   };
  }
 });
 
});

#box {
 width: 100px;
 height: 100px;
 padding: 1ch;
 box-sizing: border-box;
 background-color: red;
 border-radius: 5px;
 color: white;
}

<!DOCTYPE html>
<html>
 <head>
 </head>
 <body>
 
  <div id="box">Drag Me!</div>
  
 </body>
</html>

希望这个解决方案对您有所帮助！

- TGekko

太棒了！不幸的是，我得出结论：当使用鼠标手动滚动元素的滚动条时，“mousemove”事件不会触发 - 只有“mousedown”事件会触发...这对于那些需要“mousemove”事件的人来说是个问题。 - Kerry Johnson

1

默认行为会阻止鼠标移动和鼠标松开事件的运行，你可以通过在mousedown函数中添加event.preventDefault()来解决这个问题。

请确保在触发preventDefault()时使用与mousedown函数中传递的相同参数名称，否则它将无法正常工作。在下面的示例中，我将event作为参数传递给mousedown函数，然后通过键入event.preventDefault()来触发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;
    }
}

});

- Victor dedon

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tobías · Accepted Answer

使用 mousemove 事件。

来自于 JQuery 文档中的 mousemove 和 mouseover：

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/