Thay đổi sự kiện được ưu tiên với JQuery

Question

Tôi có đoạn code html sau:

<input type="text" id="theInput" value=""/>  
<a href="#" id="theLink">Click me</a> 

Tôi muốn phát hiện khi những thay đổi đầu vào và thực hiện một hoạt động trong trường hợp này, nhưng chỉ khi người dùng đã không nhấp vào liên kết. Tôi đã cố gắng này:

$('#theLink').live('click', function(){ 
    alert('click'); 
}); 

$('#theInput').live('change', function(){ 
    alert('change'); 
}); 

Tuy nhiên change luôn thực hiện trước khi click khi giá trị trong đầu vào thay đổi, do Javascript quy tắc sự kiện ưu tiên, và do đó chỉ "thay đổi" thông điệp được hiển thị.

Tôi muốn hiển thị change chỉ khi giá trị đầu vào thay đổi và người dùng đã thoát đầu vào nhấp vào bất kỳ địa điểm nào khác thay vì liên kết. Trong trường hợp cuối cùng tôi muốn hiển thị click.

Ví dụ là here.

Tôi sử dụng jQuery 1.6.4.

Answer 1

Theo như tôi biết, click cháy sự kiện sau khi blur và change sự kiện ở mọi trình duyệt (có một cái nhìn tại this JSFiddle). Thứ tự của blur và change khác nhau giữa các trình duyệt (nguồn: Nicholas Zakas).

Để giải quyết vấn đề của bạn, bạn có thể nghe click sự kiện trên tài liệu và so sánh mục tiêu của sự kiện với #theLink. Bất kỳ sự kiện nhấp chuột nào sẽ bong bóng lên đến tài liệu (trừ khi nó được ngăn chặn).

Hãy thử điều này:

var lastValue = ''; 

$(document).click(function(event) { 
    var newValue = $('#theInput').val(); 

    if ($(event.target).is('#theLink')) { 
     // The link was clicked 
    } else if (newValue !== lastValue) { 
     // Something else was clicked & input has changed 
    } else { 
     // Something else was clicked but input didn't change 
    } 

    lastValue = newValue; 
}); 

JSFiddle: http://jsfiddle.net/PPvG/TTwEG/

Answer 2

Ok, bây giờ tôi đã nhận nó, bạn có thể làm

$('#theLink').live('click', function(e){ 
    alert('click'); 
}); 

$('#theInput').live('change', function(e){ 
    //Check if the change events is triggerede by the link 
    if(e.originalEvent.explicitOriginalTarget.data === "Click me"){ 
     //if this is the case trigger the click event of the link 
     $('#theLink').trigger("click"); 
    }else{ 
     //otherwise do what you would do in the change handler 
     alert('change'); 
    } 
}); 

Fiddle đây http://jsfiddle.net/hTqNr/19/

Answer 3

lý do tại sao bạn không chọn giá trị của hộp đầu vào. bạn có để lưu trữ giá trị ban đầu của hộp đầu vào chức năng sẵn sàng

initialvalue= $('#theInput').val(); 

sau đó so sánh giá trị

$('#theLink').live('click', function(){ 
    var newvalue =$('#theInput').val(); 
     if(newvalue!=initialvalue) { 
      //do something 
     } 

    }); 

Answer 4

Cả hai sự kiện sẽ cháy nhưng trong ví dụ của bạn cảnh báo trong xử lý onchange sự kiện phát sinh khi sự kiện onmousedown xảy ra sẽ dừng sự kiện onmouseup cần thiết cho sự kiện onclick để kích hoạt. Sử dụng console.log sẽ hiển thị cả hai sự kiện kích hoạt.

http://jsfiddle.net/hTqNr/4/