Javascript обнаруживает, когда выпадающий список закрыт

Question

Из-за проблемы, описанной в этом вопросе У меня есть ситуация, когда мне нужно прикрепить событие mousewheel к раскрывающемуся списку только при его раскрытии (я делаю это в событии onclick). Однако мне нужно удалить событие mousewheel, когда список свернут. Как мне обнаружить это?

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

Приветствие.

var list = document.getElementById("list");
list.onclick = function (e) {
    // attach mousewheel
    list.onmousewheel = function (e) {
        // ...
    }
    // attach click off
    // This event fires fine in all browsers except FF when the list is expanded.
    // In firefox it only fires when anywhere in the document is clicked twice.
    // The first click closes the drop down list as expected and the second one
    // fires the event.
    window.document.onclick = function (e) {
        list.onmousewheel = null;
        window.document.onclick = null
    }
};

EDIT: К сожалению, решение от Meder не работает в Firefox. Событие щелчка по документу не запускается, пока я дважды не щелкну в выпадающем списке. Как мне обойти это? Он отлично работает в IE.

EDIT2: Я провел еще несколько тестов, и следующие браузеры ведут себя как ожидалось

• IE 7,
• Хром 3
• Опера 10

Для запуска Firefox в окне требуется 2 щелчка, а Safari вообще не работает.

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

Answer 1

ОК, я до сих пор не представляю, чего вы пытаетесь достичь с помощью такого жестко выбранного сценария поля выбора, но в целом попытка изменить внутреннюю работу нативного <select> не приносит результатов. Нет стандарта, который бы указывал, как события передаются внутренне в элемент формы, и браузеры, которые реализуют выбор в качестве виджета на уровне ОС (IE), в любом случае не могут многое сделать для его поддержки.

Если вам нужно такое поведение, я бы предложил использовать сценарии для замены поля <select> на лету аналогом на основе JavaScript, сделанным из <div> s. Затем вы можете точно контролировать поведение мыши и клавиатуры. Есть много библиотек , которые уже делают это, хотя, опять же, если вам нужно быть очень точным в отношении точного поведения, они могут вас не устраивать.

Answer 2

Вы ищете что-то подобное? Если пользователь щелкает в любом месте, не находящемся внутри #el, он разветвляется, и вы можете делать то, что хотите, хотя для этого требуется jQuery, но это заняло бы слишком много строк сценариев DOM.

var dropdown = $('#el');
$(document).click(function(e){
    if ( (!$(e.target).is(dropdown)) || !$(e.target).closest('#el').length ) {
        // do what you need to
    }
});

Если нет, можете ли вы быть более конкретным и привести пример?

PS - Я не тестировал фрагмент, извините, если это не то, что вы хотите.