使用纯JavaScript，在单击鼠标时只运行mousemove的最佳方法是什么？

Question

我不希望mousemove事件发生任何不必要的循环。因此，我对性能/最佳实践方面感兴趣，什么是只在mousedown == true时运行mousemove的最佳方法？目前我正在使用：

var pressedMouse = false;

myObject.addEventListener("mousedown", function(e){

    mouseDownFunction(e); 
    pressedMouse = true;

    myObject.onmousemove = function(e) {
        if(pressedMouse == true){
            mouseMoveFunction(e);
        }
     }
});

myObject.addEventListener("mouseup", function(e){
    pressedMouse = false;
});

mouseMoveFunction()没有被调用是因为pressedMouse变量的原因。如果不使用mousedown，能否防止onmousemove事件触发？

- Alyona

Answer 1

您可以通过从监听器中删除它来防止onMouseMove函数被调用:

myObject.addEventListener("mousedown", function(e){
    mouseDownFunction(e); 

    myObject.onmousemove = function(e) {
        mouseMoveFunction(e);
     }
});

myObject.addEventListener("mouseup", function(e){
    myObject.onmousemove = null
});

- CoderPi

---

但是，如果与myObject相关联的mousemove事件数量未知，并且您只想删除您设置的一个呢？ - wordbug

@wordbug 你是指使用 addEventListener 吗？ - CoderPi

是的。这将与您的其他使用（mousedown和mouseup）保持一致，并且不会干扰可能与此片段共存的其他代码。 - wordbug

Answer 2

由于您将要添加事件处理程序并且可能反复删除它，因此首先定义mouseMove函数以准备接受事件对象：

function mouseMoveFunction(e) {
//stuff
}

现在，您只需添加对该函数的引用，而不是创建一个新的匿名函数，在每次mousedown激活时调用它。此外，由于我们有了该引用，我们可以使用标准的add/remove-EventListener方法。

myObject.addEventListener("mousedown", function(e){
    mouseDownFunction(e); 
    this.addEventListener("mousemove", mouseMoveFunction);
});

myObject.addEventListener("mouseup", function(e){
    this.removeEventListener("mousemove", mouseMoveFunction);
});

- James

---

这对我来说失败了，原因在这里概述：https://dev59.com/iWkv5IYBdhLWcg3wqSf1#10444156 - Frikster

Answer 3

在事件对象中有一个叫做'which'的属性，它指示了鼠标移动期间按下了哪个按钮。使用它来确定是否在mousemove期间执行某些操作。

- Kingmaker

---

但是我能否在没有mousedown事件的情况下防止mousemove事件触发？ - Alyona

Answer 4

myObject.addEventListener("mousedown", function(e){


    myObject.onmousemove = function(e) {
        if(pressedMouse == true){
            mouseMoveFunction(e);
        }
     }
});

在上面的程序中，您每次浏览器检测到鼠标按下事件时都会添加一个鼠标移动的事件监听器。这将会严重影响性能...假设您有1000个鼠标按下事件，那么浏览器就会添加1000个鼠标移动事件。

为鼠标移动创建一个单独的事件监听器（仅一次）。

- repzero