Callback события click блокируется callbackом change?

242

12 декабря 2016, 10:04

Есть у меня на странице инпут и ссылка. Человек вводит что то в инпуте и нажимает ссылку, должны сработать оба события. В случае с console.log() срабатывают оба, но например если сделать вместо этого alert() то сработает только change. Помогите разобраться, как сделать чтоб сработали оба события?

ТАК РАБОТАЮТ ОБА СОБЫТИЯ:

$('#input').change(function() {
    console.log('change');
});
$('#link').click(function(e) {
    console.log('click');
    e.preventDefault();
});

ТАК РАБОТАЕТ ТОЛЬКО CHANGE:

$('#input').change(function() {
    alert('change');
});
$('#link').click(function(e) {
    alert('click');
    e.preventDefault();
});

Answer 1

Как сказал @FreeDooM:

И, скорее всего, до события click дело просто не доходит.

Именно, что дело не доходит, т.к. первым делом происходит потеря фокуса, при коем срабатывает модальный alert, соответственно click приходится уже не по странице, а по области, закрывающей собой страницу вне модельного окна, т.е. клика-то и нет по #link

Если отложить выполнение alert, то вы получите оба сообщения:

$('#link').click(function(e) { 
    alert2('click'); 
    e.preventDefault(); 
}); 
 
$('#input').change(function() { 
    alert2('change'); 
}); 
 
 
window.alert2 = function(str){ 
    setTimeout(function(){ alert(str); }, 500); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<input id='input' /> 
<div id='link'> 
    link 
</div>

Answer 2

alert() блокирует выполнение скриптов на странице. Дело частично в этом.

И частично, в том, что событие change у инпута срабатывает, если убрать с инпута фокус (т.е. щелкнуть в какую-нибудь другую часть страницы).

Вот тут и начинается магия, когда у тебя страница блокируется alert`oм от события change (ведь мы фокус с инпута убрали, щелкнув по ссылке). И, скорее всего, до события click дело просто не доходит.