Изменение приоритета события с JQuery

Question

У меня есть следующий HTML код:

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

Я хочу, чтобы обнаружить, когда изменения входных и выполнить операцию в этом случае, но только тогда, когда пользователь не нажал на ссылку. Я попытался это:

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

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

Однако change всегда выполняется перед click, когда значение на входе изменяется, из-за правила приоритета событий Javascript, поэтому отображается только сообщение «изменение».

Я бы хотел, чтобы он отображал change только в том случае, если введенное значение изменилось, и пользователь вышел из ввода, нажав в любом другом месте вместо ссылки. В этом последнем случае я хотел бы отобразить click.

Пример: here.

Я использую jQuery 1.6.4.

Answer 1

Насколько я знаю, click событие срабатывает после того, blur и change событий в каждом браузере (посмотреть на this JSFiddle). Порядок blur и change отличается от браузера (источник: Nicholas Zakas).

Чтобы решить вашу проблему, вы можете прослушать click событий на документе и сравнить цель мероприятия с #theLink. Любое событие клика будет зависеть от документа (если только это не будет предотвращено).

Попробуйте это:

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

Хорошо, теперь я понял, вы могли бы сделать

$('#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'); 
    } 
}); 

скрипку здесь http://jsfiddle.net/hTqNr/19/

Answer 3

почему вы не выбрать значение поля ввода. Вы должны сохранить начальное значение поля ввода на готовой функции

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

затем сравниваете значение

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

    }); 

Answer 4

Оба события будут стрелять, но в вашем примере предупреждение в обработчике onchange события вызывается, когда onmousedown события произойдет остановка события onmouseup, необходимого для возникновения события onclick. С помощью console.log будут показаны оба события.

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