How to know which mouse button was pressed

Question

How to know which mouse button was pressed

Navigation

#1 by (4 votes)
#2 by (3 votes)
#3 by (1 votes)
#4 by (-1 votes)

2

I want to know when a mouse button is pressed on the button , which was the pressed, if the left, right, or middle. The problem is that for the right click I get the typical menu. Nor does it detect if I press the middle one. How to detect also if one was pressed apart from the left one ?, and how to hide the menu that comes out by default when pressing right click?

 function handleOnClick(e) {
     console.log("button clicked");
     console.log(e.button);
 }

<button onclick="handleOnClick(event)">
    myButton
</button>

javascript html eventos mouse

asked by Theia 20.07.2017 в 20:12

source

4 answers

Amazon EC2 error IOError Input / Output every 6 or 12 Hours Display a list of elements from a view to a modal in jquery

score 4 · Answer 1

Alternatively you can use a listener directly on the button at the click (the button can be any HTML tag):

    document.getElementById("boton").addEventListener("mousedown", function(e){
      console.log(e.which);
    });

    <button id="boton">Este también es un botón</button>

This throws the button you're pressing into the console.

Edit:

The listener has been changed from click to mousedown. Now it detects all the buttons that are pressed by throwing the result in the console. JQuery is not used.

score 3 · Answer 2

<html>
<body >
  <input type="button" onmousedown="detectarBoton(event);" value="BOTON">
<script>
function detectarBoton(event){
 
	if (event.button==2)
		alert("El botón del ratón pulsado fue el derecho");
	else if (event.button==1)
		alert("El botón del ratón pulsado fue el medio");
     else
		alert("El botón del ratón pulsado fue el izquierdo");
 
}
</script>
</body>
</html>

score 1 · Answer 3

With this code you will know what type of click you made, with JQuery:

$(document).ready(function(){
    $("#id").mousedown(function(ev){
        //1 - izquierdo; 2 - medio; 3 - derecho
            if(ev.which == 3) 
                {
                 $('#mensaje1').text("se oprimió el botón derecho");
                }
        });
});

To know with Javascript:

<html>
<body >
  <input type="button" onmousedown="detectarBoton(event);" value="BOTON">
<script>
function detectarBoton(event){
 
	if (event.button==2)
		alert("El botón del ratón pulsado fue el derecho");
	else if (event.button==1)
		alert("El botón del ratón pulsado fue el medio");
     else
		alert("El botón del ratón pulsado fue el izquierdo");
 
}
</script>
</body>
</html>

score -1 · Answer 4

How about, look to do it in a simple way you can add the jQuery library to your project as in the example that I'm going to leave you. This library contains usual functions that are already a standard and you can use it to do what you need by assigning a listener to an element of your HTML and in just putting the necessary if or a switch to do something every time the Click code is the same which you need.

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      /*La variable Event que se envia en la funcion es
       **para capturar todo el evento el cual lleva el
       **caracter precionado es un JSON*/
      $("#label").click(function(event) {
        switch (event.which) {
          case 0:
            $(this).html("click tipo: medio");
            break;
          case 1:
            $(this).html("click tipo: izquierdo");
            break;
          case 2:
            $(this).html("click tipo: derecho");
            break;
        }
      });

    });
  </script>
</head>

<body>
  <div>
    <button id="label">Esperando Click</button>
  </div>
</body>

</html>