jQuery sống (nghe tiếng 'click') bắn cho kích chuột phải vào

Question

tôi đã nhận thấy một hành vi kỳ lạ của live() hàm trong jQuery:

<a href="#" id="normal">normal</a> 
<a href="#" id="live">live</a> 

$('#normal').click(clickHandler); 
$('#live').live('click', clickHandler); 

function clickHandler() { 
    alert("Clicked"); 
    return false; 
} 

Đó là tiền phạt và dandy cho đến khi bạn nhấp chuột phải vào các "sống" và nó sẽ kích hoạt trình xử lý và sau đó không hiển thị menu ngữ cảnh. Trình xử lý sự kiện không kích hoạt (như mong đợi) trên liên kết "bình thường".

tôi đã có thể làm việc xung quanh nó bằng cách thay đổi xử lý như sau:

function clickHandler(e) { 
    if (e.button != 0) return true; 
    // normal handler code here 
    return false; 
} 

Nhưng đó là thực sự khó chịu khi phải nói thêm rằng tất cả các xử lý sự kiện. Có cách nào tốt hơn để xử lý sự kiện chỉ kích hoạt như trình xử lý nhấp chuột thông thường không?

Answer 1

Đó là một known issue:

Nó có vẻ như Firefox không bắn một sự kiện nhấp chuột cho các phần tử trên một nhấn chuột phải, mặc dù nó bắn một mousedown và mouseup. Tuy nhiên, nó không kích hoạt sự kiện nhấp chuột trên document! Vì .live bắt các sự kiện ở cấp tài liệu, nó thấy sự kiện nhấp cho phần tử ngay cả mặc dù chính phần tử đó không. Nếu bạn sử dụng một sự kiện như mouseup, cả hai yếu tố p và document sẽ thấy sự kiện.

Cách giải quyết của bạn là tốt nhất bạn có thể làm ngay bây giờ. Nó dường như chỉ ảnh hưởng đến Firefox (tôi tin rằng nó thực sự là một lỗi trong Firefox, không phải jQuery mỗi lần).

Xem thêm this question được hỏi hôm qua.

Answer 2

Đây là hậu quả không may của cách thực hiện live. Nó thực sự sử dụng sự kiện bubbling để bạn không ràng buộc với sự kiện click của phần tử neo, bạn đang ràng buộc với sự kiện click của tài liệu.

Answer 3

Tôi đã tìm thấy giải pháp - "sửa" mã số live().

Trong nguồn chưa được giải mã của jQuery 1.3.2 quanh dòng 2989, có một hàm gọi là liveHandler(). Sửa đổi mã để thêm một dòng:

2989: function liveHandler(event) { 
2990:  if (event.type == 'click' && event.button != 0) return true; 

Điều này sẽ ngăn các sự kiện nhấp không kích hoạt bất cứ điều gì trừ nút chuột trái. Nếu bạn đặc biệt muốn, bạn hoàn toàn có thể dễ dàng sửa đổi mã để cho phép các sự kiện "rightclick" quá, nhưng điều này làm việc cho tôi để nó ở đó.

Answer 4

Bạn thực sự có thể viết lại nó như:

function reattachEvents(){ 
    $(element).unbind('click').click(function(){ 
     //do something 
    }); 
} 

và gọi nó khi bạn thêm một yếu tố dom mới, cần có kết quả mong đợi (không bắn trên các sự kiện click chuột phải).

Answer 5

Tôi đã giải quyết vấn đề này bằng cách sử dụng các sự kiện được tổ chức. Trong tình huống của tôi, sự khác biệt giữa mousedown và click không quan trọng.