jQuery: preventDefault() ne fonctionne pas sur les événements d'entrée/de clic?

Question

Je souhaite désactiver le menu contextuel par défaut lorsqu'un utilisateur clique avec le bouton droit sur un champ de saisie pour afficher un menu contextuel personnalisé. D'une manière générale, son assez facile de désactiver le menu contextuel en faisant quelque chose comme:

$([whatever]).bind("click", function(e) { e.preventDefault(); }); 

Et en fait, je peux le faire sur à peu près tous les éléments sauf pour les champs d'entrée dans FF - Quelqu'un sait pourquoi ou pouvait pointez-moi vers de la documentation?

Voici le code que je travaille avec, merci les gars.

HTML:

<script type="text/javascript"> 
var r = new RightClickTool(); 
</script> 

<div id="main"> 
    <input type="text" class="listen rightClick" value="0" /> 
</div> 

JS:

function RightClickTool(){ 

var _this = this; 
var _items = ".rightClick"; 

$(document).ready(function() { _this.init(); }); 

this.init = function() { 
_this.setListeners(); 
} 

this.setListeners = function() { 
$(_items).click(function(e) { 
    var webKit = !$.browser.msie && e.button == 0; 
    var ie = $.browser.msie && e.button == 1; 

    if(webKit||ie) 
    { 

    // Left mouse...do something() 

    } else if(e.button == 2) { 
    e.preventDefault(); 

    // Right mouse...do something else(); 
    } 

}); 
} 

} // Ends Class 

EDIT:

Désolé, après avoir lu les commentaires, je me rends compte que je dois préciser quelques petites choses.

1) Le code ci-dessus fonctionne ... dans un sens. Le code est capable de trier par quel bouton a été cliqué, il ne se soucie pas que je dis e.preventDefault() et le menu contextuel apparaît toujours. En d'autres termes, si vous mettez une alerte sur e.button vous obtiendrez votre 1 ou 0 pour la gauche et 2 pour la droite ... mais il se moque de moi et montre toujours le menu par défaut damné!

2) Si je place le sélecteur jQuery sur un autre élément (autre que l'entrée) alors tout fonctionnera, FF respectera l'appel preventDefault() et le menu contextuel par défaut ne s'affichera pas.

Answer 1

Désolé les gars, je sais que c'est un flic-out « réponse » parce que je n'ai jamais été en mesure de comprendre exactement pourquoi les navigateurs WebKit n'aiment pas vous embêter avec des événements sur le terrain d'entrée, mais peu importe, cela fonctionne. Donc la solution est d'appliquer l'écouteur à toute la fenêtre et ensuite de demander si la cible a la classe à laquelle vous voulez appliquer l'effet ... et de partir de là. Pour être honnête, c'est probablement une meilleure solution de toute façon parce que pour mon application particulière, cela me permet d'appliquer cette fonctionnalité à n'importe quel élément que je veux.

var _class = "input.hideRightClick"; 

this.setListeners = function() { 
    $(window).click(function(e) { 
     if($(e.target).is(_class)) 
     { 
      e.preventDefault(); 
      alert("hide!"); 
     } 
    }); 
} 

Answer 2

Je viens de tester dans Firefox 3.6 et commence la première instruction if, ainsi le e.preventDefault() n'est jamais appelé.

var webKit = !$.browser.msie && e.button == 0; // TRUE IN FIREFOX 3.6 

    var ie = $.browser.msie && e.button == 1; 

    if(webKit||ie) 
    { 

    // Left mouse...do something() 

    } else if(e.button == 2) { 
    e.preventDefault(); 

    // Right mouse...do something else(); 
    } 

Answer 3

Une solution multi-navigateur pour désactiver le menu contextuel par défaut:

window.oncontextmenu = function() { return false }; 

Pour capturer l'événement contextmenu seulement à l'intérieur d'une utilisation d'élément donné:

document.getElementById('myElement').oncontextmenu=function(){ 

    // Code to handle event 
    return false; 
} 

Vous obtiendrez des résultats différents en fonction du scénario d'événement exact et du navigateur si vous essayez des méthodes autres que le menu contextuel pour interrompre un événement de clic droit.

En jQuery:

$('myElement').bind('contextmenu', function(){ 

    // Handle right-click event. 
    return false; 
}); 

Vous pouvez également utiliser l'événement de jQuery.qui pour déterminer quel bouton a été pressé, mais vous devrez quand même d'annuler l'événement contextmenu par défaut:

// Cancel default oncontextmenu event. 
    $(element).bind('contextmenu', function(){ return false }); 

    $(element).mousedown(function(event){ 

     switch (event.which) 

      case 1: 
      // Left mouse 
      break; 

      case 2: 
      // Middle mouse 
      break; 

      case 3: 
      // Right mouse. 
      break; 

    }); 

Je l'ai testé cela dans IE6 (sous Wine), 11 Chrome, Firefox 3.6, Opera 11 et Safari.