javascript right - Como distinguir entre o clique esquerdo e direito do mouse com jQuery




click mousedown (14)

Como você obtém o botão do mouse clicado usando jQuery?

$('div').bind('click', function(){
    alert('clicked');
});

isso é acionado tanto pelo clique direito quanto pelo esquerdo, qual é a maneira de conseguir clicar com o botão direito do mouse? Eu ficaria feliz se algo como abaixo existe:

$('div').bind('rightclick', function(){ 
    alert('right mouse button is pressed');
});

Answers

Com jquery você pode usar o event object type

jQuery(".element").on("click contextmenu", function(e){
   if(e.type == "contextmenu") {
       alert("Right click");
   }
});

Há muitas respostas muito boas, mas eu só quero tocar em uma grande diferença entre o IE9 e o IE <9 ao usar event.button .

De acordo com a especificação antiga da Microsoft para event.button os códigos diferem dos usados ​​pelo W3C. O W3C considera apenas 3 casos:

  1. Botão esquerdo do mouse é clicado - event.button === 1
  2. Botão direito do mouse é clicado - event.button === 3
  3. Botão do meio do mouse é clicado - event.button === 2

Em antigos Internet Explorer, no entanto, a Microsoft está mudando um pouco o botão pressionado e há 8 casos:

  1. Nenhum botão é clicado - event.button === 0 ou 000
  2. Botão esquerdo é clicado - event.button === 1 ou 001
  3. Botão direito é clicado - event.button === 2 ou 010
  4. Botões esquerdo e direito são clicados - event.button === 3 ou 011
  5. Botão do meio é clicado - event.button === 4 ou 100
  6. Os botões do meio e da esquerda são clicados - event.button === 5 ou 101
  7. Os botões do meio e direito são clicados - event.button === 6 ou 110
  8. Todos os 3 botões são clicados - event.button === 7 ou 111

Apesar do fato de que isso é teoricamente como ele deve funcionar, nenhum Internet Explorer jamais suportou os casos de dois ou três botões pressionados simultaneamente. Eu estou mencionando isso porque o padrão W3C não pode teoricamente suportar isso.


event.which === 1 garante que é um clique esquerdo (ao usar o jQuery).

Mas você também deve pensar em teclas modificadoras: ctrl cmd shift alt

Se você está interessado apenas em capturar cliques simples, não modificados, pode fazer algo assim:

var isSimpleClick = function (event) {
  return !(
    event.which !== 1 || // not a left click
    event.metaKey ||     // "open link in new tab" (mac)
    event.ctrlKey ||     // "open link in new tab" (windows/linux)
    event.shiftKey ||    // "open link in new window"
    event.altKey         // "save link as"
  );
};

$('a').on('click', function (event) {
  if (isSimpleClick(event)) {
    event.preventDefault();
    // do something...
  }
});

Edit : eu mudei para trabalhar para elementos adicionados dinamicamente usando .on() no jQuery 1.7 ou acima:

$(document).on("contextmenu", ".element", function(e){
   alert('Context Menu event has fired!');
   return false;
});

Demonstração: jsfiddle.net/Kn9s7/5

[Início da postagem original] Isso é o que funcionou para mim:

$('.element').bind("contextmenu",function(e){
   alert('Context Menu event has fired!');
   return false;
}); 

Caso você esteja em várias soluções ^^

Edit : Tim Down traz um bom ponto que nem sempre vai ser um right-click que aciona o evento contextmenu , mas também quando a tecla do menu de contexto é pressionada (o que é indiscutivelmente um substituto para um right-click )


A partir da versão 1.1.3 do jQuery, event.which normaliza event.keyCode e event.charCode para que você não precise se preocupar com problemas de compatibilidade do navegador. Documentação sobre event.which

event.which dará 1, 2 ou 3 para os botões esquerdo, médio e direito do mouse respectivamente, portanto:

$('#element').mousedown(function(event) {
    switch (event.which) {
        case 1:
            alert('Left Mouse button pressed.');
            break;
        case 2:
            alert('Middle Mouse button pressed.');
            break;
        case 3:
            alert('Right Mouse button pressed.');
            break;
        default:
            alert('You have a strange Mouse!');
    }
});

Você pode facilmente saber qual botão do mouse foi pressionado, verificando which propriedade do objeto de evento nos eventos do mouse:

/*
  1 = Left   mouse button
  2 = Centre mouse button
  3 = Right  mouse button
*/

$([selector]).mousedown(function(e) {
    if (e.which === 3) {
        /* Right mouse button was clicked! */
    }
});

$.fn.rightclick = function(func){
    $(this).mousedown(function(event){
        if(event.button == 2) {
            var oncontextmenu = document.oncontextmenu;
            document.oncontextmenu = function(){return false;};
            setTimeout(function(){document.oncontextmenu = oncontextmenu;},300);
            func(event);
            return false;
        }
    });
};

$('.item').rightclick(function(e){ 
    alert("item");
}); 

Você também pode bind ao contextmenu e return false :

$('selector').bind('contextmenu', function(e){
    e.preventDefault();
    //code
    return false;
});

Demonstração: http://jsfiddle.net/maniator/WS9S2/

Ou você pode fazer um plugin rápido que faça o mesmo:

(function( $ ) {
  $.fn.rightClick = function(method) {

    $(this).bind('contextmenu rightclick', function(e){
        e.preventDefault();
        method();
        return false;
    });

  };
})( jQuery );

Demonstração: http://jsfiddle.net/maniator/WS9S2/2/

Usando .on(...) jQuery> = 1.7:

$(document).on("contextmenu", "selector", function(e){
    e.preventDefault();
    //code
    return false;
});  //does not have to use `document`, it could be any container element.

Demonstração: http://jsfiddle.net/maniator/WS9S2/283/


$.event.special.rightclick = {
    bindType: "contextmenu",
    delegateType: "contextmenu"
};

$(document).on("rightclick", "div", function() {
    console.log("hello");
    return false;
});

http://jsfiddle.net/SRX3y/8/


$("#element").live('click', function(e) {
  if( (!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1) ) {
       alert("Left Button");
    }
    else if(e.button == 2){
       alert("Right Button");
    }
});

Atualização para o estado atual das coisas:

var $log = $("div.log");
$("div.target").on("mousedown", function() {
  $log.text("Which: " + event.which);
  if (event.which === 1) {
    $(this).removeClass("right middle").addClass("left");
  } else if (event.which === 2) {
    $(this).removeClass("left right").addClass("middle");
  } else if (event.which === 3) {
    $(this).removeClass("left middle").addClass("right");
  }
});
div.target {
  border: 1px solid blue;
  height: 100px;
  width: 100px;
}

div.target.left {
  background-color: #0faf3d;
}

div.target.right {
  background-color: #f093df;
}

div.target.middle {
  background-color: #00afd3;
}

div.log {
  text-align: left;
  color: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="target"></div>
<div class="log"></div>


$(document).ready(function () {
    var resizing = false;
    var frame = $("#frame");
    var origHeightFrame = frame.height();
    var origwidthFrame = frame.width();
    var origPosYGrip = $("#frame-grip").offset().top;
    var origPosXGrip = $("#frame-grip").offset().left;
    var gripHeight = $("#frame-grip").height();
    var gripWidth = $("#frame-grip").width();

    $("#frame-grip").mouseup(function (e) {
        resizing = false;
    });

    $("#frame-grip").mousedown(function (e) {
        resizing = true;
    });
    document.onmousemove = getMousepoints;
    var mousex = 0, mousey = 0, scrollTop = 0, scrollLeft = 0;
    function getMousepoints() {
        if (resizing) {
            var MouseBtnClick = event.which;
            if (MouseBtnClick == 1) {
                scrollTop = document.documentElement ? document.documentElement.scrollTop : document.body.scrollTop;
                scrollLeft = document.documentElement ? document.documentElement.scrollLeft : document.body.scrollLeft;
                mousex = event.clientX + scrollLeft;
                mousey = event.clientY + scrollTop;

                frame.height(mousey);
                frame.width(mousex);
            }
            else {
                resizing = false;
            }
        }
        return true;

    }


});

Há também uma maneira de fazer isso sem o JQuery!

Veja isso:

document.addEventListener("mousedown", function(evt) {
    switch(evt.buttons) {
      case 1: // left mouse
      case 2: // right mouse
      case 3: // middle mouse <- I didn't tested that, I just got a touchpad
    }
});

$("body").on({
    click: function(){alert("left click");},
    contextmenu: function(){alert("right click");}   
});

Eu sei que esta é uma questão antiga e as soluções acima funcionam bem, exceto em alguns casos.

Gostar

<select id="select_selector">
<option value="1">Item1</option>
<option value="2">Item2</option>
<option value="3">Item3</option>
<option value="4" selected="selected">Item4</option>
<option value="5">Item5</option>
</select>

Então, o Item 4 será exibido como "Selecionado" no navegador e agora você deseja alterar o valor como 3 e mostrar "Item3" como selecionado, em vez de Item4.So de acordo com as soluções acima, se você usar

jQuery("#select_selector").val(3);

Você verá que o item 3, conforme selecionado no navegador.Mas quando você processar os dados em php ou asp, você encontrará o valor selecionado como "4" .A razão é que, o seu html será semelhante a este.

<select id="select_selector">
<option value="1">Item1</option>
<option value="2">Item2</option>
<option value="3" selected="selected">Item3</option>
<option value="4" selected="selected">Item4</option>
<option value="5">Item5</option>
</select>

e obtém o último valor como "4" na linguagem do lado do servidor.

ASSIM MINHA SOLUÇÃO FINAL NESTE SENTIDO

newselectedIndex = 3;
jQuery("#select_selector option:selected").removeAttr("selected");
jQuery("#select_selector option[value='"+newselectedIndex +"']").attr('selected', 'selected');  

EDIT : Adicione aspas simples em torno de "+ newselectedIndex +" para que a mesma funcionalidade possa ser usada para valores não numéricos.

Então, o que eu faço é remover o atributo selecionado e, em seguida, fazer o novo como selecionado.

Eu apreciaria comentários sobre isso de programadores seniores como @strager, @ y0mbo, @ISIK e outros







javascript jquery javascript-events right-click