2011-11-14 24 views
29

Nếu bạn đính kèm hai hoặc nhiều trình xử lý sự kiện vào một phần tử HTML, chúng sẽ được thực hiện sau phần tử kia. Tuy nhiên, nếu bạn muốn dừng các trình xử lý sự kiện tiếp theo, dựa trên một điều kiện được kiểm tra trong trình xử lý đầu tiên, thì bạn nên làm gì?Làm thế nào để ngăn chặn các trình xử lý sự kiện khác, từ trình xử lý đầu tiên, trong jQuery

Ví dụ:

<div id='target'> 
</div> 

<p id='result'> 
</p> 

Tôi muốn hủy xử lý thứ hai, nếu xử lý đầu tiên được hủy bỏ.

$(function() { 
    var target = $('#target'), 
     result = $('#result'); 
    target.click(function(e) { 
     result.append('first handler<br />'); 
     // Here I want to cancel all subsequent event handlers 
    }); 
    target.click(function(e) { 
     result.append('second handler<br />'); 
    }); 
}); 

Bạn có thể xem fiddle here.

PS: Tôi biết rằng e.preventDefault() ngăn tác vụ mặc định của phần tử HTML (ví dụ: ngăn yêu cầu HTTP GET được gửi vì nhấp chuột vào liên kết) và e.preventPropagation() khiến sự kiện không được truyền sang các phần tử gốc trong cây DOM. Tôi cũng biết rằng nó có thể sử dụng một biến giữa, đặt nó thành true trong trình xử lý đầu tiên và kiểm tra nó trong các trình xử lý tiếp theo. Nhưng tôi muốn xem liệu có một giải pháp gọn gàng, tinh vi hơn cho vấn đề này hay không.

Trả lời

43

Xem event.stopImmediatePropagation()-http://api.jquery.com/event.stopImmediatePropagation/

Theo các tài liệu API jQuery, phương pháp này:

Giữ phần còn lại của bộ xử lý từ được thực hiện và ngăn chặn sự kiện từ bọt lên cây DOM.

+0

tôi cập nhật [fiddle] (http://jsfiddle.net/saeedneamati/pFp7P/2/) để phản ánh câu trả lời của bạn. 1 và cảm ơn. –

1

Giải pháp là trình duyệt cụ thể. Xem dojo.stopEvent:

dojo.stopEvent = function(/*Event*/ evt){ 
    // summary: 
    //  prevents propagation and clobbers the default action of the 
    //  passed event 
    // evt: Event 
    //  The event object. If omitted, window.event is used on IE. 
    if(has("dom-addeventlistener") || (evt && evt.preventDefault)){ 
     evt.preventDefault(); 
     evt.stopPropagation(); 
    }else{ 
     evt = evt || window.event; 
     evt.cancelBubble = true; 
     on._preventDefault.call(evt); 
    } 
}; 

Cập nhật fiddle: http://jsfiddle.net/pFp7P/1/

+0

Câu hỏi này liên quan đến jQuery – Bill

+0

Đây là giải pháp gốc; hiện nó không hoạt động w/jQuery nữa? – fncomp

Các vấn đề liên quan