运行仅在使用纯 javascript 的 mousedown 上进行 mousemove 的最佳方法？

Question

我不希望 mousemove 事件发生任何不必要的循环。所以我开始感兴趣，就 performance/best 而言，只有在 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 事件触发？

Answer 1

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

Answer 2

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

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

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

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

Answer 3

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


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

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

这会削弱您的性能..假设您按下了 1000 次鼠标，那么浏览器将添加一个 mousemove 事件 1,000 次

为 mousemove 创建一个单独的事件侦听器（一次）

Answer 4

由于您要添加事件处理程序然后删除它，可能会一遍又一遍，因此定义 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);
});

运行仅在使用纯 javascript 的 mousedown 上进行 mousemove 的最佳方法？

Best way to run mousemove only on mousedown with pure javascript?

javascript

events

mousemove

mousedown

运行 仅在使用纯 javascript 的 mousedown 上进行 mousemove 的最佳方法？

Best way to run mousemove only on mousedown with pure javascript?

javascript

events

mousemove

mousedown

运行仅在使用纯 javascript 的 mousedown 上进行 mousemove 的最佳方法？