Как вызвать некоторый код в теге select либо при изменении, либо при использовании keyup, но не тогда, когда select теряет фокус

Question

(в версии jQuery 1.4.4)

Название вопроса может быть не таким ясным, поэтому ниже я приведу более подробное описание:

Я пытаюсь вызвать некоторый код JavaScript, когда выбор в одном из моих блоков выбора изменяется. Я знаю, что могу сделать это с change() следующим образом:

var my_handler = function(eventObject){
  // ... do something here ...
};
$('#my_select_box').change(my_handler);

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

var my_handler = function(eventObject){
  // ... do something here ...
};
$('#my_select_box').change(my_handler).keyup(my_handler);

Действительно, как при изменении выбора с помощью клавиатуры, так и при изменении выбора с помощью мыши выполняется обработчик.

Проблема в том, что когда я изменяю выделение с помощью клавиатуры, а затем перехожу к следующему полю (с помощью мыши или клавиатуры) в форме. Обработчик снова запускается (второй раз)

Можете ли вы объяснить, почему это происходит, и скажите, есть ли способ обойти эту проблему?

Answer 1

Единственный ответ, который, кажется, работает, - это каким-то образом отслеживать фактическое изменение вашего значения, например, переменную вне обработчика событий.Возможно, вам не удастся избежать поднятия события, но вы можете не отвечать на него.Пример ниже иллюстрирует:

var lastVal = null;
var my_handler = function(eventObject) {
    if (lastVal == $(this).val()) return;
    console.log("Changed");
    lastVal = $(this).val();
    eventObject.stopPropagation();
};

$('#my_select_box').change(my_handler).keyup(my_handler);

Answer 2

Вы можете попробовать использовать событие нажатие клавиши : http://www.quirksmode.org/dom/events/keys.html

Или Вы можете игнорировать ключевые события, которые вам не нужны: http://unixpapa.com/js/testkey.html

Answer 3

Учитывая ваше требование, не очень идеальным решением будет выбор ключа и щелчок по опциям в соответствии с примером jsfiddle

$("#my_select_box option").bind("click", function(e) {
    my_handler();

});

$("#my_select_box").bind("keyup", function(e) {
    my_handler();

});