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

Question

I do not want any unnecessary loops occurring for mousemove event. So I became interested, in terms of performance/best practice what would be the best way to run mousemove only while mousedown == true? Currently I'm using:

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() isn't being called because of the pressedMouse variable. Can onmousemove event be prevented from firing if mousedown not in use?

score 16 · Accepted Answer · answered Dec 27 '15 at 19:33

16

You can prevent the onMouseMove-Function to be called, by removing it from the listener:

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

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

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

answered Dec 27 '15 at 19:33

CoderPi

12,985
4
34
62

But what if there was an unknown number of mousemove events associated to myObject, and you wanted to remove only the one you had set? – wordbug Jul 16 '18 at 12:36
@wordbug do you mean by using `addEventListener` ? – CoderPi Jul 17 '18 at 07:17
Yes. It'd be consistent with your other uses (mousedown and mouseup), and it wouldn't interfere with other code that might coexist with this snippet. – wordbug Jul 17 '18 at 16:09

score 2 · Answer 2 · answered Dec 27 '15 at 19:51

Since you're going to be adding an event handler and then removing it, potentially over and over, define the mouseMove function first ready to accept an event object:

function mouseMoveFunction(e) {
//stuff
}

Now you can merely add a reference to that function rather than creating a new anonymous function that calls it whenever mousedown activates. Plus, since we have that reference, we might as well use the standard add/remove-EventListener methods.

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

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

This fails for me because of reasons outlined here: https://stackoverflow.com/a/10444156/2734863 — Frikster, Oct 31 '18 at 03:12

score 0 · Answer 3 · answered Dec 27 '15 at 19:24

0

In event object there is a property called 'which' what indicates which button is pressed during mouse move. Use this one to determine whether do some operation during mousemove or not.

answered Dec 27 '15 at 19:24

Kingmaker

469
1
6
20

But can I prevent `mousemove` from even firing without `mousedown` event? – Alyona Dec 27 '15 at 19:28

score 0 · Answer 4 · answered Dec 27 '15 at 19:37

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


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

What you are doing in the above is everytime the browser detects a mousedown event you are adding an event listener for mouse move.

This will can crippple your performance..let's say you have 1000 mouse down then then browser will add a mousemove event 1,000 times

Create a separate event listener for mousemove (once)

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

4 Answers4