2

Deseo saber cuando se presione un boton del mouse sobre el button, cual fue el presionado, si el izquierdo, derecho, o el de en medio. El problema es que para el click derecho me sale el tipico menu. Tampoco detecta si presiono el de en medio. ¿Como detectar también si fue apretado uno aparte del izquierdo?, y ¿como ocultar el menu que sale por defecto al apretar click derecho?

 function handleOnClick(e) {
     console.log("button clicked");
     console.log(e.button);
 }
<button onclick="handleOnClick(event)">
    myButton
</button>

4 respuestas 4

3

Alternativamente puedes usar un listener directamente en el botón al click (el botón puede ser cualquier tag HTML):

    document.getElementById("boton").addEventListener("mousedown", function(e){
      console.log(e.which);
    });
    <button id="boton">Este también es un botón</button>

Esto arroja en la consola el botón que estás presionando.

Edit:

Se ha cambiado el listener de click a mousedown. Ahora detecta todos los botones que se presionan arrojando el resultado en consola. No se usa JQuery.

1
  • Ayudaría un comentario para saber la causa de los downvotes cada que existen para así corregir en todo caso lo que sea necesario corregir. La solución que presento es sencilla y limpia.
    – Solrac
    Commented el 21 jul. 2017 a las 3:07
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>

5
  • 1
    Deberias unificar las respuestas si no dan distintas soluciones de resolver el problema. Ademas, al presionar la rueda del mouse (boton del medio) me loguea click izquierdo igual. Y en el derecho me sigue sacando el menu
    – Theia
    Commented el 20 jul. 2017 a las 18:52
  • Ahí te arregle. Una respuesta fue con JQuery, la cual no era lo que estabas buscando aunque se podría solucionar de esa manera(JQuery = Javascript), y esta, que es netamente Javascript
    – Carlos
    Commented el 20 jul. 2017 a las 18:57
  • Luego del alert sigue saliendo el menu del click derecho, hay alguna forma de prevenir esto?
    – Theia
    Commented el 20 jul. 2017 a las 19:01
  • Bastante raro, estoy probando ahora mismo el ejemplo, haciendo click derecho sobre el botón aparece la alerta, le doy ciclk (izquierdo) sobre Aceptar, y no aparece el ningún menú
    – Carlos
    Commented el 20 jul. 2017 a las 19:04
  • 2
    @Carlos, considera eliminar esta segunda respuesta, para favorecer la anterior
    – Marcos
    Commented el 20 jul. 2017 a las 19:06
2

Con este código sabrás que tipo de click realizó, con 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");
                }
        });
});

Para saber con 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>

4
  • Si puedes pon el ejemplo en javascript. Y en un snippet para poder ejecutar mas facilmente el codigo ;)
    – Theia
    Commented el 20 jul. 2017 a las 18:26
  • Te coloqué un ejemplo
    – Carlos
    Commented el 20 jul. 2017 a las 18:41
  • 1
    @Carlos tu solución para JS está detectando clicks en todo el documento, no en el botón.
    – Solrac
    Commented el 20 jul. 2017 a las 18:44
  • 1
    Ya modifiqué, le agregué al botón, estaba algo desatento jajaja
    – Carlos
    Commented el 20 jul. 2017 a las 18:49
0

Que tal, mira para poder hacerlo de una manera sencilla puedes agregar la librería de jQuery a tu proyecto como en el ejemplo que te voy a dejar. Esta librería contiene funciones habituales que ya son un estándar y puedes aprovecharlo para realizar lo que necesitas asignando un listener a un elemento de tu HTML y en el solo poner los if necesarios o bien un switch para realizar algo cada que el código del Click sea igual al que tu necesitas.

<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>

1
  • 2
    Hola. Tu codigo me detecta solo cuando aprieto el izquierdo, y cuando lo hago con el derecho me sigue sacando el menu. Igual, esperaba una respuesta usando solo javascript
    – Theia
    Commented el 20 jul. 2017 a las 18:49

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.