仅使用纯javascript在mousedown上运行mousemove的最佳方法是什么?

时间:2015-12-27 19:19:48

标签: javascript events mousemove mousedown

我不希望mousemove事件发生任何不必要的循环。所以我对性能/最佳实践感兴趣,仅在mousemove时运行mousedown == true的最佳方法是什么?目前我正在使用:

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。如果onmousemove未使用,可以阻止mousedown事件被触发吗?

4 个答案:

答案 0 :(得分:9)

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

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

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

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

答案 1 :(得分:1)

由于您将要添加一个事件处理程序,然后一遍又一遍地删除它,所以首先定义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);
});

答案 2 :(得分:0)

在事件对象中有一个名为'的属性'什么表示在鼠标移动过程中按下了哪个按钮。使用此选项可确定在移除鼠标时是否进行某些操作。

答案 3 :(得分:0)

SELECT field1 + char(13) + filed2 FROM table1

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

这可能会使你的表现瘫痪..我说你有1000个鼠标按下然后浏览器会添加一次mousemove事件1000次

为mousemove创建一个单独的事件监听器(一次)