Многие текущие решения сломаются во многих ситуациях. Любое решение, которое основано на проверке количества кликов дважды, будет очень непостоянным.
Некоторые сценарии для рассмотрения:
- Если вы нажмете, затем выключите, а затем снова включите, он будет считать как щелчки, так и выстрелы.
- В Firefox вы можете открыть меню одним щелчком мыши и перетащить к выбранной опции, даже не поднимая мышку.
- Если вы используете любую комбинацию нажатий клавиш, вы, скорее всего, отключите счетчик кликов или вообще пропустите событие изменения.
- Вы можете открыть раскрывающийся список с помощью Alt + ↕ (или Пробел в Chrome и Opera).
- Когда выпадающий список имеет фокус, любая из клавиш со стрелками изменит выбор
- Когда раскрывающееся меню открыто, нажатие Tab или Enter сделает выбор
Вот более полное расширение:
Самый надежный способ проверить, была ли выбрана опция, - это использовать событие change, которое вы можете обработать с помощью обработчика jQuery .change().
Осталось только определить, был ли исходный элемент выбран снова.
Об этом много спрашивали ( один , два , три ), но без отличного ответа в любой ситуации.
Самое простое, что нужно сделать, это проверить, не было ли click или keyup события в элементе option:selected НО Chrome, IE и safari, похоже, не поддержка событий для option элементов , даже если они соответствуют рекомендации w3c
Внутри Select элемент выглядит как черный ящик. Если вы слушаете события, связанные с ним, вы даже не можете сказать, на каком элементе произошло событие, был ли список открыт или нет.
Следующая лучшая вещь, похоже, обрабатывает событие blur. Это будет означать, что пользователь сфокусировался на раскрывающемся списке (возможно, видел список, возможно, нет) и принял решение, что он хотел бы придерживаться первоначального значения. Чтобы продолжить обработку изменений, мы все равно подпишемся на событие change. И чтобы мы не удваивали счет, мы установим флаг, если событие change было вызвано, поэтому мы не будем запускать дважды:
Код:
(function ($) {
$.fn.selected = function (fn) {
return this.each(function () {
$(this).focus(function () {
this.dataChanged = false;
}).change(function () {
this.dataChanged = true;
fn(this);
}).blur(function (e) {
if (!this.dataChanged) {
fn(this);
}
});
});
};
})(jQuery);
Тогда звоните так:
$("#dropdownid").selected(function (e) {
alert('You selected ' + $(e).val());
});