javascript - If mousedown then trigger mousemove else do nothing - Stack Overflow

admin管理员组

文章数量:1419233

I have a technical issue and I am not sure what the best way is to solve it.

Basically im working on an audio progress bar where the user can change the position of the song. This should be done by either clicking or by keeping the mousedown and moving it.

elem.addEventListener("mouseup", function(event){
  elem.removeEventListener("mousemove", fn);
});

elem.addEventListener("mousedown", function(event){
  elem.addEventListener("mousemove", function(event){
      // Stuff to do
  }, fn);
});

So essentially:

If mouse is held down and then moved do something. If mouse is released prevent the trigger of mousemove.

I know if I continue with this it might work but it looks like a horrible mess to me. I dont want to pick up bad habits.

My question is: How do I make make this work using best practices?

Note: I also tried the following:

function fn(event) {
if(event.button == 0) {
      elem.addEventListener("mousemove", function(event){
          // Stuff to do
      });
}
}

What i'm missing here !

I have a technical issue and I am not sure what the best way is to solve it.

Basically im working on an audio progress bar where the user can change the position of the song. This should be done by either clicking or by keeping the mousedown and moving it.

elem.addEventListener("mouseup", function(event){
  elem.removeEventListener("mousemove", fn);
});

elem.addEventListener("mousedown", function(event){
  elem.addEventListener("mousemove", function(event){
      // Stuff to do
  }, fn);
});

So essentially:

If mouse is held down and then moved do something. If mouse is released prevent the trigger of mousemove.

I know if I continue with this it might work but it looks like a horrible mess to me. I dont want to pick up bad habits.

My question is: How do I make make this work using best practices?

Note: I also tried the following:

function fn(event) {
if(event.button == 0) {
      elem.addEventListener("mousemove", function(event){
          // Stuff to do
      });
}
}

What i'm missing here !

• javascript
• mouseevent

Share Improve this question Follow edited Dec 26, 2015 at 19:59 Venkat.R 7,77655 gold badges4444 silver badges6868 bronze badges asked Dec 26, 2015 at 18:20 AspergerAsperger 3,2321111 gold badges5959 silver badges106106 bronze badges 8

• How about just using input type="range" ? Set the min to 0 and the max value to the song length in seconds. Then simply use the change event of the input control to seek to the correct position. – HaukurHaf Commented Dec 26, 2015 at 18:24
• @HaukurHaf im aware but I am trying to find out how to do this without. Also it allows me for more custom work since I done most of GUI myself. – Asperger Commented Dec 26, 2015 at 18:26
• jqueryui./draggable Did you ever hear about this? – Ahmad Asjad Commented Dec 26, 2015 at 18:28
• @AhmadAsjad ya I did but I want to avoid jquery – Asperger Commented Dec 26, 2015 at 18:29
• but you like the same thing? – Ahmad Asjad Commented Dec 26, 2015 at 18:30

 |  Show 3 more ments

1 Answer 1

Sorted by: Reset to default 7

Don't add/remove the listener, just set a variable at trigger actions accordingly:

var isMousedown = false;

elem.addEventListener("mousedown", function (event) {
    isMousedown = true;
}

elem.addEventListener("mouseup", function (event) {
    isMousedown = false;
});

elem.addEventListener("mousemove", function (event) {
    if (isMousedown) {
        // do stuff
    } else {
        // do different stuff, or nothing
    }
});

You may even want to put the mousedown/mouseup listeners on the parent (or even the root element) to avoid scenarios where the mouseup happens outside of the target, if that is a possibility in your case.

本文标签： javascriptIf mousedown then trigger mousemove else do nothingStack Overflow