Есть ли событие DOM, которое срабатывает, когда элемент выбора HTML закрыт?

Question

Я ищу событие DOM, которое можно прослушать с помощью JavaScript, когда закрываемый элемент select (но не измененные параметры) затем закрывается нажатием на элемент select, где-то (где угодно) в другом месте настр.

Это не событие blur выбора, потому что выбор сохраняет фокус.Аналогично, это не событие focus какого-либо другого элемента или документа, или mousedown или click в окне, документе или теле.

Это не событие change выбора, поскольку ни одна опция в пределах выбора не была изменена.

Меня не волнуют устаревшие Internet Explorer - просто что-то, чтобы работать в современных браузерах, соответствующих стандартам.Тем не менее, стоит знать о проприетарных взломах.

Я создал JSFiddle для демонстрации проблемы: http://jsfiddle.net/premasagar/FpfnM/

1. Нажмите на кнопку выбора на панели «Результат»
2. Нажмите на текст, помеченный «ЗДЕСЬ» (или где-либо еще), одним щелчком мыши и посмотрите, добавлено ли какое-либо событие в журнал.В последних версиях Chrome или Firefox нет событий.

Таким образом, вопрос заключается в следующем: Какой JavaScript может быть добавлен, чтобы регистрировать событие при нажатии на кнопку выбора?

(я задал похожий, но другой вопрос здесь:
JavaScript на iOS: открытие HTML-элемента select )

Answer 1

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

http://jsfiddle.net/FpfnM/50/

в Firefox (и яПредполагается, что Chrome), вам нужно будет тщательно отслеживать состояние этого выбора.При нажатии клавиши escape или наступлении события blur необходимо обновить состояние, чтобы идентифицировать его как закрытое.Я не реализовал это в своей демонстрации, и вы можете увидеть, что произойдет, если вы нажмете escape, а не нажмете кнопку выбора.

В Safari все было проще, когда событие mousedown в выборе означает открытиевыбор и любое закрытие выбора обозначается событием click.

Если вы найдете браузер, в котором не запускается ни одно из этих событий, вы можете попробовать еще один прием.Поскольку виджеты форм, такие как select и textarea, часто отображаются операционной системой, а не внутри браузера, возможно, вы можете взаимодействовать с ними, и некоторые сообщения могут не попадать в обработчик событий браузера.Если вам нужно расположить прозрачную текстовую область, покрывающую экран, при более низком z-индексе, когда открыто окно выбора, вы можете использовать его для отслеживания этого щелчка.Может быть в состоянии захватить события, которые может пропустить элемент DOM браузера.

Обновление: Chrome видит размыкание при выборе, когда он открывается, и указание мыши на документе при нажатии на страницус открытым выбора.Вот версия, которая работает с Chrome:

http://jsfiddle.net/FpfnM/51/

Опять же, вам нужно будет выполнить некоторое обнаружение браузера, чтобы справиться с правильным поведением каждого из них.В частности, одним из преимуществ Chrome является то, что при повторном нажатии кнопки «Выбрать» событие не запускается.Однако вы можете обнаружить щелчок страницы.

Краткий обзор:

Chrome/Safari: select.mousedown on open, document.mouseup on close
Firefox: select.click on open, document.mouseup on close
IE8/IE7: select.click on open, document.mouseup on close

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

Надеюсь, это поможет!

Answer 2

Если у вас более 1 выпадающего списка:

        $("select").each(function () {
        var initDropdown = $(this);
        initDropdown.data("open", false);
        console.log(this.name + "   closed");

        initDropdown.on("blur", function () {
            var blurDdopdown = $(this);
            blurDdopdown.data("open", false);
            console.log(this.name + "   closed");
        });
    });

    $("select").bind("click", function () {
        var clickedDropdown = $(this);

        if (clickedDropdown.data('open') == false) {
            clickedDropdown.data('open', true);
            console.log(this.name + "   open");
        } else {
            clickedDropdown.data('open', false);
            console.log(this.name + "   closed");
        }
    });

Answer 3

предварительное условие: использование jQuery! Это, вероятно, решит только часть вашей проблемы, но если вы ищете событие, которое должно сработать, когда вы щелкаете по элементу, вы можете использовать оверлей div.

Когда пользователь нажимает на поле выбора:

$('#mySelectBox').click(function () {
    var myOverlayDiv = $('<div id="overlayDiv" class="overlayDiv"></div>')
    .click(function () {
        // call your "select lost focus" function here
        // which should include $('#overlayDiv').remove() somewhere!
    })
    .show()
    .appendTo(document.body);
});

Стиль для наложения div:

.overlayDiv {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
opacity:0;
z-index:1000;
}

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

Answer 4

Мой первый инстинкт - немного обходной путь для достижения этой цели, это будет использовать код, который вы обычно используете для закрытия (пользовательского) выпадающего меню при нажатии снаружи:свой тег тела вы добавляете onClick="clickInBody()", а на выбранный вами элемент добавляете onClick="clickInBodyStop(event)".Это должно вызывать событие каждый раз, когда вы нажимаете на страницу, но если вы нажмете на теге выбора, это остановит распространение и не вызовет functionToCallOnBlur()

Answer 5

Я получил следующие события, следуя указаниям на вашем JSFiddle к письму:

BODY, mousedown, STRONG
#document, mousedown, STRONG
window, mousedown, STRONG
SELECT, blur, SELECT
BODY, click, STRONG
#document, click, STRONG
window, click, STRONG

Это все события, которые были вызваны, когда я нажал «ЗДЕСЬ» после того, как меню выбора уже было в фокусе и развернуто. Это было в последней версии Chrome.

Разве ни одного из них не достаточно для ваших целей?

Редактировать: Если вы хотите убедиться, что ваш элемент Select теряет фокус, установите глобальную переменную Javascript 'selectFocused' и установите для нее значение False. Установите значение «Истина», когда ваше меню «Выбор» получает фокус, и установите значение «Ложь», когда происходит любое из вышеуказанных событий. «selectFocused» теперь можно использовать в любом месте вашего кода, чтобы определить, имеет ли ваш элемент Select текущий фокус, и когда он меняет значения, вы знаете, что ваш элемент Select был выбран или не выбран.

Answer 6

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

Следующий jQuery может сделать это. Здесь - код в скрипте

$(function () {
    let flag = 0;

    $("#selectId").click(function (e) {
        e.stopPropagation();
        if (flag === 0) {
            flag = 1;
            $(document).one("click", function () {
                flag = 0;
                alert("select end");
            });
        }
    });
});

HTML-код:

<select multiple id="selectId">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>