使用纯javascript仅在mousedown上运行mousemove的最佳方法？ [关闭]答案

【问题标题】：Best way to run mousemove only on mousedown with pure javascript? [closed]使用纯javascript仅在mousedown上运行mousemove的最佳方法？ [关闭]
【发布时间】：2015-12-27 19:19:47
【问题描述】：

我不希望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 事件？

【问题讨论】：

标签： javascript events mousemove mousedown

【解决方案1】：

您可以通过从侦听器中移除 onMouseMove-Function 来阻止它被调用：

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

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

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

【讨论】：

但是如果与 myObject 关联的 mousemove 事件数量未知，并且您只想删除您设置的那个，该怎么办？
@wordbug 你的意思是使用addEventListener 吗？
是的。它与您的其他用途（mousedown 和 mouseup）保持一致，并且不会干扰可能与此 sn-p 共存的其他代码。

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

【讨论】：

由于此处列出的原因，这对我来说失败了：stackoverflow.com/a/10444156/2734863

【解决方案3】：

在事件对象中有一个名为“which”的属性，它指示在鼠标移动期间按下了哪个按钮。用这个来判断mousemove时是否做一些操作。

【讨论】：

但是我可以阻止mousemove 在没有mousedown 事件的情况下触发吗？

【解决方案4】：

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


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

您在上面所做的是每次浏览器检测到 mousedown 事件时，您都在为鼠标移动添加事件侦听器。

这会削弱你的表现..假设你有 1000 个鼠标按下然后浏览器将添加一个 mousemove 事件 1000 次

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

【讨论】：