当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和mouseoverjquery文档:

在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); }
);

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

Answer 3

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

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 文档。然而，触摸兼容设备倾向于侦听TouchEvents而不是 MouseEvents。TouchEvent.touches.length实现了与 MouseEvent.buttons 类似的效果。

为了提供示例，我使用以下代码来移动我创建的元素。为了移动元素，我使用了“ mousemove ”事件的MouseEvent.movementX和MouseEvent.movementY来简化代码。“ touchmove ”事件没有这些，因此我存储了之前的触摸坐标并在“ touchstart ”上清除了它们。如果需要，您可以对“mousemove”事件执行类似的操作，因为 moveX 和 movingY 值可能因浏览器而异。

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!

 }
}

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
   };
  }
 });
 
});

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