Почему Firefox реагирует иначе, чем Webkit и IE на "click" событие на теге "select"?

Я понял, что Firefox обрабатывает событие click на теге <select> иначе, чем Webkit/IE, и я не мог понять, почему и как разрешить эту разницу.

В частности, Webkit/IE рассматривает каждое событие click на <select> как комбинацию и, нажимая на "select", и щелчок одной из кнопок drop- вниз <option>, показанный на графиках ниже:

Первый клик:

Второй клик:

В Webkit/IE событие click будет запущено только после того, как оба клика будут выполнены.

Однако в Firefox первый щелчок тега <select> рассматривается как событие клика, второй щелчок, чтобы выбрать <option>, рассматривается как еще одно событие клика. Таким образом, два события click были запущены в Firefox по сравнению с одним в Webkit/IE для той же операции.

Теперь, чтобы продемонстрировать это в примере кода, предположим, что у нас есть: (ссылка JSfiddle)

<select id="sel">
    <option>one</option>
    <option>two</option>
    <option>three</option>
</select>
<script>
function select() {
    $("#sel").one("click", function(event) {
        console.log('mouse down!');
        $("#sel").one('click', function() {
            console.log('mouse down again!');
            $("#sel").off();
            select();
        });
    });
}
$(document).ready(function() {
    select();
});
</script>

В Webkit/IE выполнение набора операций, показанных выше на графике (в первый раз), даст результат:

mouse down!

В Firefox это даст:

mouse down!
mouse down again!

Почему это так и как его исправить?

Изменить: я пытался с использованием чистого JavaScript без jQuery, результат остается тем же.

Изменить 2: немного больше контекста, я изначально ответил на этот вопрос: onclick на теге опциона, не работающем на IE и chrome, и выиграл щедрость за мой ответ. Однако, как указывал оп, позже мое решение не работало в Firefox. Я решил углубиться в решение этой проблемы, и, следовательно, этот вопрос был задан, и я вознаграждаю, что 50 из них получили от этого решения. По сути, проблема заключается в создании меню выбора, которое будет вызывать событие всякий раз, когда будет сделан выбор, даже если это то же самое. Это оказалось сложнее, чем ожидалось, если возможно вообще из-за различных реализаций браузера.

Редактировать 3: Я полностью осведомлен о onchange, но вопрос здесь не о onchange, если вы внимательно прочитаете. Мне нужно, чтобы каждый триггер события вызывал событие, даже если они являются одним и тем же выбором (который не будет запускать onchange.

Ответ 1

Почему бы не работать с событием onchange?

$("#sel").change(function(){
    $('body').append("<br/> Option changed");
});

Вот fiddle

Но он не срабатывает даже при одинаковом выборе. Работайте над тем, чтобы использовать плагин как Избранный, как предложено в другом ответе.

EDIT: Философский стиль select не предназначен для такой функциональности. Событие change достаточно для большинства случаев использования тегов select. Желаемая функциональность, то есть знать, сделал ли пользователь выбор по элементу (даже если он не изменился), не соответствует функциональной модели тега select. Логически никто не хотел бы нажимать на элемент select, если он/она не хочет изменять выбор.

Чтобы соответствовать вашему требованию, вы можете дать Go button помимо вашего тега select и вызвать ту же функцию onclick, которую вы обычно делаете с событием onchange select элемент. В противном случае выберите hovercard/hover-menu вместо select.

Ответ 2

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

Я понял, что я мог решить проблему с другой стороны, используя меню выбора jQuery UI или Chosen, чтобы создать меню выбора вместо использования тега <select>. Таким образом, событие click будет запущено на теге <ul> или <li>, который будет согласован во всех проверенных вами браузерах.

Ответ 3

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

Это технически делает (sorta), но в FF он срабатывает, когда вы нажимаете, чтобы открыть, и когда вы нажимаете, чтобы закрыть (что вы действительно можете сделать одним щелчком мыши, что дает то же самое в Safari AND Firefox). Но это одно и то же событие. (Срабатывание триггера нажмите $('#sel'));

$("#sel").click(function(event) {
    if($(event.target).is('option')) {
        $(this).closest('select').click();
        return true;
    }
    console.log(event.target);
});

Причина, по которой я говорю, что это "sorta" делает это, не обрабатывается, если вы выберете выпадающий список из tabbing over и с помощью клавиш со стрелками. Я думаю, что если вам нужно, чтобы событие было запущено, даже если выбран один и тот же элемент, вам нужно пойти по этому поводу по-другому. Для меня, как разработчика, если бы это был мой проект, было бы неприемлемо, если бы я вставлял флажок в поле выбора и выбирал элемент, не касаясь мыши, это не сработает (это означает, что пользователь приходит на мой сайт и взаимодействует с помощью блока выбора без мыши, и он не делает то, что он даже не знает, что он должен делать, возможно, все это не работает и т.д.).

Мы можем играть весь день, получая .click() для работы, но это не совсем решение, даже если мы достигли первоначальной цели. (О, и я никогда не смог получить все, чтобы стрелять в Chrome).

Как я уже сказал в своем комментарии, я думаю, что это связано с тем, как они взаимодействуют с выбором. Кажется, что выбор Safari на самом деле не на странице... что он сортирует, создает этот красивый элемент, который действует и выглядит как список элементов <option>, когда вы нажимаете на него, но это не так. Возможно, это не срабатывает при первом щелчке. Webkit не рассматривает его как "реальный" элемент, когда вы нажимаете на него, и просто запускает нажатие на кнопку выбора при ее закрытии, никогда не взаимодействуя с "реальными" параметрами.

Изменение HTML-кода может быть единственным способом (например, Chosen). По иронии судьбы, некоторые из выбранных элементов (те, которые выглядят как выпадающие списки) не могут быть выбраны путем перетаскивания... по крайней мере, не на их демонстрационную страницу (см. "Стандартный выбор" ). Но это по крайней мере заставляет меня щелкнуть по нему, поэтому он вызывает события, связанные с мышью.

В любом случае, я ненавижу нерешенные проблемы, но похоже, что нет реального решения для работы .click() для работы с <select> во всех браузерах, и мы должны начать фокусироваться на альтернативных решениях. Извините: - (