jQuery: preventDefault() not working on input/click events?

Question

I want to disable the default contextMenu when a user right-clicks on an input field so that I can show a custom contextMenu. Generally speaking, its pretty easy to disable the right-click menu by doing something like:

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

And in fact, I can do this on just about every element EXCEPT for input fields in FF - anyone know why or could point me towards some documentation?

Here is the relevant code I am working with, thanks guys.

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:

Sorry, after reading the comments I realize that I should clarify a few things.

1) The code above does work...in a sense. The code is able to sort through which button was clicked, it just doesn't care that I say e.preventDefault() and the right-click menu still pops up. In other words, if you put an alert on e.button you would get your 1 or 0 for left and 2 for right...but it just laughs at me and still shows the damned default menu!

2) If I put the jQuery selector on ANY other element (other than input) then everything will work, FF will respect the preventDefault() call and the default right-click menu will not show.

Answer 1

A cross-browser solution to disable the default context menu:

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

To capture the contextmenu event only inside a given element use:

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

    // Code to handle event
    return false;
}

You will get different results depending on the exact event scenario and browser if you try methods other than oncontextmenu for interrupting a right-click event.

In jQuery:

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

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

You can also use jQuery's event.which to determine which button was pressed, but you will still have to cancel the default contextmenu event:

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

    });

I've tested this in IE6 (under Wine), Chrome 11, Firefox 3.6, Opera 11 and Safari.

Answer 2

Sorry guys, I know this is a cop-out "answer" because I was never able to figure out exactly why webkit browsers don't like you messing with input field events but whatever, this works. So the solution is to apply the listener to the whole window and then just ask if the target has the class you want to apply the effect to...and go from there. To be honest, this is probably a better solution anyway because for my particular application, this allows me to apply this functionality to any element I want.

var _class = "input.hideRightClick";

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

Answer 3

I just tested in Firefox 3.6 and it's proceeding into the first if statement, so the e.preventDefault() is never called.

  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();
  }