Action while button is being clicked

Question

It is possible to know if the left mouse button is clicked using Javascript?

It’s not whether it was clicked, it’s whether it was pressed and it’s still going on. When you click it changes a value and after you drop back the value, I’ll have to move it clicked too. I don’t know if I was clear, but I think you can understand.

I don’t have code, because it’s something I need to implement, but if that’s all I’ve described is possible it might be useful.

Answer 1

Unfortunately Javascript does not have a method that detects click continuously. The event mousedown is fired when you click both left and right button and is only detected once, even if you hold the click.

The event mouseup does the reverse, detects when click is released.

What is possible to do to simulate a continuous action with the mousedown is to insert a setInterval calling an action over and over after a brief break. As you release the click, trigger the event mouseup cancelling the setInterval.

Now, as the mousedown detects both left and right click, you can use the property buttons from the event to know which button was clicked:

buttons: 1 (clique esquerdo)
buttons: 2 (clique direito)

You can also disable the menu that opens to the right click. To do so return false at the event contextmenu:

botao.addEventListener("contextmenu", function(e){
   e.preventDefault();
}, false);

Example:

var botao = document.getElementById("botao");
var intervalo;
botao.addEventListener("mousedown", function(e){
   if(e.buttons == 2){
      intervalo = setInterval(pressionado, 100);
   }
});

botao.addEventListener("mouseup", function(){
   clearInterval(intervalo);
});

// desativar o menu do clique direito
botao.addEventListener("contextmenu", function(e){
   e.preventDefault();
}, false);

function pressionado(){
   var html = '<p>texto</p>';
   document.getElementById("areadeteste").innerHTML += html;
}

<button id="botao">Clique aqui com o botão direito, segure um pouco e solte</button>
<div id="areadeteste"></div>

Answer 2

Hello.

From what you said, you need an event that understands that the user clicked on an element but didn’t drop the "click" button, right?

You can use the "onmousedown" event. When the user clicks left, this event will occur, and while the next event - "onmouseup" - does not occur, it means that the button is still pressed. Got it?

Following simple example (click and hold stays in the same event): https://jsfiddle.net/vj97402L/18/

You’re thinking like it’s three events, but actually it’s only two.

Good luck.