jQuery: preventDefault() không hoạt động trên các sự kiện đầu vào/nhấp chuột?

Question

Tôi muốn tắt ngữ cảnh mặc địnhMenu khi người dùng nhấp chuột phải vào trường nhập để tôi có thể hiển thị ngữ cảnh tùy chỉnhMenu. Nói chung, nó khá dễ dàng để vô hiệu hóa menu chuột phải bằng cách làm một cái gì đó như:

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

Và trên thực tế, tôi có thể làm điều này trên chỉ là về mọi yếu tố TRỪ cho các lĩnh vực đầu vào trong FF - ai biết tại sao hoặc có thể chỉ cho tôi một số tài liệu hướng dẫn?

Đây là mã liên quan mà tôi đang làm việc, cảm ơn các bạn.

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:

Xin lỗi, sau khi đọc các ý kiến ​​tôi nhận ra rằng tôi nên làm rõ một vài điều.

1) Mã ở trên không hoạt động ... theo nghĩa nào đó. Mã có thể sắp xếp thông qua nút nào được nhấp, nó chỉ không quan tâm rằng tôi nói e.preventDefault() và menu chuột phải vẫn bật lên. Nói cách khác, nếu bạn đặt một cảnh báo trên e.button bạn sẽ nhận được 1 hoặc 0 của bạn cho trái và 2 cho đúng ... nhưng nó chỉ cười vào tôi và vẫn hiển thị menu mặc định chết tiệt!

2) Nếu tôi đặt bộ chọn jQuery trên bất kỳ phần tử nào khác (ngoài đầu vào) thì mọi thứ sẽ hoạt động, FF sẽ tôn trọng lệnh preventDefault() và menu chuột phải mặc định sẽ không hiển thị.

Answer 1

kẻ Xin lỗi, tôi biết đây là một cop-out "câu trả lời" bởi vì tôi đã không bao giờ có thể tìm ra chính xác lý do tại sao các trình duyệt webkit không thích bạn rối tung với các sự kiện lĩnh vực đầu vào nhưng bất cứ điều gì, công trình này. Vì vậy, giải pháp là để áp dụng người nghe đến toàn bộ cửa sổ và sau đó chỉ cần hỏi nếu mục tiêu có lớp bạn muốn áp dụng hiệu ứng cho ... và đi từ đó. Thành thật mà nói, đây có lẽ là một giải pháp tốt hơn vì ứng dụng cụ thể của tôi, điều này cho phép tôi áp dụng chức năng này cho bất kỳ phần tử nào tôi muốn.

var _class = "input.hideRightClick"; 

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

Answer 2

Tôi vừa thử nghiệm trong Firefox 3.6 và tiến hành vào câu lệnh if đầu tiên, vì vậy e.preventDefault() không bao giờ được gọi.

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

Một giải pháp qua trình duyệt để vô hiệu hóa các menu ngữ cảnh mặc định:

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

Để nắm bắt được sự kiện ContextMenu chỉ bên trong việc sử dụng yếu tố đưa ra:

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

    // Code to handle event 
    return false; 
} 

Bạn sẽ nhận được kết quả khác nhau tùy thuộc vào kịch bản sự kiện chính xác và trình duyệt nếu bạn thử các phương thức khác với oncontextmenu vì làm gián đoạn sự kiện nhấp chuột phải.

Trong jQuery:

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

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

Bạn cũng có thể sử dụng sự kiện của jQuery.để xác định nút được nhấn, nhưng bạn vẫn sẽ phải hủy bỏ sự kiện ContextMenu mặc định:

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

    }); 

Tôi đã thử nghiệm điều này trong IE6 (dưới Rượu), Chrome 11, Firefox 3.6, Opera 11 và Safari.