У меня есть поле ввода, в котором отображается настраиваемое раскрывающееся меню. Я хотел бы использовать следующие функции:
- Когда пользователь нажимает нигде вне поля ввода, меню следует удалить.
- Если, более конкретно, пользователь нажимает на div внутри меню, меню должно быть удалено, и специальная обработка должна произойти, на основании которого был нажат div.
Вот моя реализация:
В поле ввода есть событие onblur()
, которое удаляет меню (путем установки родительского элемента innerHTML
в пустую строку) всякий раз, когда пользователь щелкает за пределами поля ввода. Внутри div также есть onclick()
события, которые выполняют специальную обработку.
Проблема в том, что события onclick()
никогда не срабатывают при щелчке по меню, потому что поле ввода onblur()
срабатывает первым и удаляет меню, включая onclick()
s!
Я решил проблему, разделив события div div < > t22 > на onmousedown()
и onmouseup()
событиями и установив глобальный флаг мыши, который очищается с помощью мыши вверх, подобно тому, что было предложено в этот ответ. Поскольку перед тем, как onblur()
срабатывает onmousedown()
, флаг будет установлен в 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;
...
}