使用纯javascript仅在mousedown上运行mousemove的最佳方式

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

本文关键字：mousemove 运行 最佳 方式 mousedown javascript 仅在      更新时间：2023-09-26

我不希望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;
});

由于pressedMouse变量的原因，未调用mouseMoveFunction()。如果mousedown未使用，是否可以阻止onmousemove事件触发？

您可以通过从侦听器中删除onMouseMove函数来阻止调用：

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

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

在事件对象中有一个名为"which"的属性，它指示在鼠标移动过程中按下了哪个按钮。使用此选项可以确定是否在鼠标移动期间执行某些操作。

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

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

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

这会影响你的表现。。假设您按下1000个鼠标，然后浏览器将添加鼠标移动事件1000次

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

相关文章：