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

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!");
        }
    });
}