У меня есть поле ввода, которое вызывает пользовательское выпадающее меню. Я хотел бы следующую функциональность:

Когда пользователь щелкает в любом месте за пределами поля ввода, меню должно быть удалено.Если, более конкретно, пользователь нажимает на div внутри меню, меню должно быть удалено,а также специальная обработка должна происходить в зависимости от того, какой div был нажат.

Вот моя реализация:

Поле ввода имеетonblur() событие, которое удаляет меню (путем установки его родителяinnerHTML в пустую строку) всякий раз, когда пользователь щелкает за пределами поля ввода. Дивы внутри меню также имеютonclick() события, которые выполняют специальную обработку.

Проблема в том, чтоonclick() события никогда не запускаются при нажатии меню, потому что поле вводаonblur() срабатывает первым и удаляет меню, включаяonclick()s!

Я решил проблему, разделив меню div'овonclick() вonmousedown() а такжеonmouseup() события и установка глобального флага при наведении мыши, который сбрасывается при наведении мыши вверх, аналогично тому, что было предложено вэтот ответ, Потому чтоonmousedown() пожары раньшеonblur(), флаг будет установлен вonblur() если был нажат один из элементов меню, но не где-нибудь еще на экране. Если в меню нажали, я сразу же вернусь изonblur() без удаления меню, затем дождитесьonclick() огонь, после чего я могу безопасно удалить меню.

Есть ли более элегантное решение?

Код выглядит примерно так:

<div class="menu" onmousedown="setFlag()" onmouseup="doProcessing()">...</div>
<input id="input" onblur="removeMenu()" ... />

var mouseflag;

function setFlag() {
    mouseflag = true;
}

function removeMenu() {
    if (!mouseflag) {
        document.getElementById('menu').innerHTML = '';
    }
}

function doProcessing(id, name) {
    mouseflag = false;
    ...
}