Изменить приоритет событий с помощью JQuery - PullRequest
Новая
       1

Изменить приоритет событий с помощью JQuery

6 голосов
/ 29 декабря 2011

У меня есть следующий 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.

Пример: здесь .

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

Ответы [ 4 ]

1 голос
/ 29 декабря 2011

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

Чтобы решить вашу проблему, вы можете прослушать 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/

1 голос
/ 29 декабря 2011

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

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

1 голос
/ 29 декабря 2011

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

$('#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/

0 голосов
/ 29 декабря 2011

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

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

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

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

  });
...