jQuery: preventDefault() non funziona sugli eventi di input/clic?

Question

Voglio disattivare il menu contestuale predefinito quando un utente fa clic con il pulsante destro del mouse su un campo di input in modo che possa mostrare un menu contesto personalizzato. In generale, la sua piuttosto facile per disattivare il menu di scelta rapida facendo qualcosa di simile:

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

E infatti, posso fare questo su quasi ogni elemento tranne per i campi di input in FF - Qualcuno sa perché o potrebbe indicarmi una documentazione?

Ecco il codice pertinente con cui lavoro, grazie ragazzi.

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:

Siamo spiacenti, dopo aver letto i commenti che mi rendo conto che avrei dovuto chiarire un paio di cose.

1) Il codice sopra funziona ... in un certo senso. Il codice è in grado di ordinare attraverso quale pulsante è stato fatto clic, ma non gli interessa che io dica e.preventDefault() e il menu di scelta rapida compaia ancora. In altre parole, se metti un avviso su e.button otterresti il ​​tuo 1 o 0 per sinistra e 2 per destra ... ma semplicemente ride di me e mostra ancora il dannato menu predefinito!

2) Se metto il selettore jQuery su QUALSIASI altro elemento (diverso dall'input), allora tutto funzionerà, FF rispetterà la chiamata preventDefault() e il menu di scelta rapida predefinito non verrà visualizzato.

Answer 1

Scusate ragazzi, so che questo è un "risposta" poliziotto-out perché non sono mai stato in grado di capire esattamente il motivo per cui i browser WebKit non ti piace fare scherzi con gli eventi dei campi di input, ma qualunque cosa, questo funziona. Quindi la soluzione è applicare l'ascoltatore all'intera finestra e poi chiedere se il target ha la classe a cui vuoi applicare l'effetto ... e andare da lì. Ad essere onesti, questa è probabilmente una soluzione migliore in ogni caso, perché per la mia particolare applicazione, questo mi permette di applicare questa funzionalità a qualsiasi elemento che voglio.

var _class = "input.hideRightClick"; 

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

Answer 2

Ho appena testato in Firefox 3.6 e sta procedendo nella prima istruzione if, quindi e.preventDefault() non viene mai chiamato.

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

Una soluzione cross-browser per disattivare il menu contestuale di default:

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

per catturare l'evento contextmenu solo all'interno di un determinato uso elemento:

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

    // Code to handle event 
    return false; 
} 

si ottengono risultati diversi in base allo scenario dell'evento esatto e al browser se si tentano metodi diversi da oncontextmenu per l'interruzione di un evento del tasto destro.

In jQuery:

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

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

È anche possibile utilizzare l'evento di jQuery.che per determinare quale pulsante è stato premuto, ma si dovrà ancora di annullare l'evento di default contextmenu:

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

    }); 

Ho provato questo in IE6 (sotto Wine), Chrome 11, Firefox 3.6, Opera 11 e Safari.