jQuery:preventDefault()不能处理输入/点击事件？

Question

我想在用户右键单击输入字段时禁用默认的contextMenu,以便我可以显示自定义的contextMenu.一般来说,通过执行以下操作非常容易禁用右键单击菜单:

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

事实上,除了FF中的输入字段之外,我可以在几乎所有元素上执行此操作 - 任何人都知道为什么或可能指向某些文档？

以下是我正在使用的相关代码,谢谢大家.

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

编辑:

对不起,在阅读评论后,我意识到我应该澄清一些事情.

1)从某种意义上说,上面的代码确实有效.代码能够对单击的按钮进行排序,它只是不关心我说e.preventDefault()并且仍然弹出右键单击菜单.换句话说,如果你在e.button上发出警告,你会得到你的1或0左边和2右边...但它只是嘲笑我,仍然显示该死的默认菜单!

2)如果我将jQuery选择器放在任何其他元素(输入除外)上,那么一切都会正常工作,FF将尊重preventDefault()调用,默认的右键单击菜单将不会显示.

Answer 1

用于禁用默认上下文菜单的跨浏览器解决方案:

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

要仅在给定元素内捕获contextmenu事件,请使用:

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

    // Code to handle event
    return false;
}

如果您尝试使用oncontextmenu以外的方法来中断右键单击事件,则会根据确切的事件场景和浏览器获得不同的结果.

在jQuery中:

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

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

您还可以使用jQuery的event.which来确定按下了哪个按钮,但您仍然必须取消默认的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;

    });

我在IE6(Wine下),Chrome 11,Firefox 3.6,Opera 11和Safari中测试了这个.

Answer 2

抱歉，大家，我知道这是一个逃避的“答案”，因为我一直无法弄清楚为什么 webkit 浏览器不喜欢你搞乱输入字段事件，但无论如何，这有效。因此，解决方案是将侦听器应用于整个窗口，然后询问目标是否具有您想要应用效果的类......然后从那里开始。老实说，这可能是一个更好的解决方案，因为对于我的特定应用程序，这允许我将此功能应用于我想要的任何元素。

var _class = "input.hideRightClick";

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