Differentiating between mouseup mousedown and click

Question

I know that mousedown happens when a user depresses the mouse button, mouseup happens when the release the mouse and click is of course two events mousedown and mouseup. I have three different events each dealing with these three events mouseup down and click. My question is how to differentiate between the three, now my mouse down has a timer, so I was thinking of adding a boolean in that timer and testing it within the click I tried this and it didn't work to my standards.

Mousedown - timer checks for certain classes then if none of these classes exist within the targeted element proceed

Mouseup - clear the timer

Click - open a module

I may have not made the boolean a global variable that each can read or not, or I am missing something completely. Here is an example quick code of my full code:

   var isDown = false;
 ee[i].addEventListener('click',function(){
   if(isDown===false){
     openModule();
    }
  },false);

 ee[i].addEventListener('mousedown',function(){
     var timer;
     var $this = this;
     timer = setTimeout(function(){
    if($this.className == "class"){
     isDown=true;
     createActive();
     }
   },500);
 },true);

  ee[i].addEventListener('mouseup',function(){
    clearTimeout(timer);
  },false);

That is just a quick example. I may have missed some coding but I hope you catch my drift in the code above. Anyone know of a good way to differentiate between the three events?

Answer 1

I've rewritten your code utilizing jQuery...

var isDown = false;
var timer;

$('.class').mousedown(function(){
    isDown = false;
    timer = setTimeout(function(){
        isDown = true;
        //createActive();
            console.log('MOUSE DOWN');
    }, 500);
}).mouseup(function(){
    if(isDown === false){
        //openModule();
            console.log('CLICK');
    }else{
            console.log('MOUSE UP');
    }
    clearTimeout(timer);    
});

If you simply add jQuery to your page, my code will automatically attach itself to any element in your document with a class of 'class'.

I've commented out your createActive(); and openModule(); calls so that you can play around with it (viewing your javascript console at runtime will show you the script in action - remove the console.log() stuff when you're done playing). This code could be optimised a bit more but it will give you the general idea.

Your timer variable needed to be created globally (I moved it out of the function).

In this case (declaring a mousedown time barrier) the click function will be rendered useless so I've improvised it into the mouseup function.

It's good to know core javascript, but jQuery is just too easy and powerful to ignore.

Answer 2

Try this:

const isDown = ref(false)
const timer = ref(0)

const mouseDown = () => {
  isDown.value = true
  timer.value = setTimeout(() => {
    isDown.value = false
  }, 120)
}

const mouseUp = () => {
  if (isDown.value === true) {
    hideModal()
  } else {
    return
  }
  clearTimeout(timer.value)
}