onclick () и onblur () проблема заказа

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

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

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

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

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

Я решил эту проблему путем разделения дивы меню 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;
    ...
}

У меня была та же проблема, что и у вас, мой интерфейс разработан именно так, как вы описываете. Я решил проблему, просто заменив onClickдля пунктов меню на onMouseDown. Я больше ничего не делал; нет onMouseUp, никаких флагов. Это решило проблему, позволив браузеру автоматически изменять порядок в зависимости от приоритета этих обработчиков событий без какой-либо дополнительной работы с моей стороны.

Есть ли причина, по которой это не сработало бы и для вас?

onClickне следует заменять на onMouseDown.

Хотя этот подход в некоторой степени работает , это два принципиально разных события, которые имеют разные ожидания в глазах пользователя. Использование onMouseDownвместо onClickразрушит предсказуемость вашего программного обеспечения в этом случае. Таким образом, эти два события не взаимозаменяемы.

Для иллюстрации: при случайном нажатии кнопки пользователи ожидают, что смогут удерживать щелчок мыши, перетащить курсор за пределы элемента и отпустить кнопку мыши, что в конечном итоге приведет к отсутствию действий. onClickЯвляется ли это. onMouseDownне позволяет пользователю удерживать мышь, а вместо этого немедленно запускает действие, не обращаясь за помощью к пользователю. onClickстандарт, по которому мы ожидаем запускать действия на компьютере.

В этой ситуации звоните event.preventDefault()на onMouseDownмероприятие. onMouseDownпо умолчанию вызовет событие размытия и не будет делать этого при preventDefaultвызове. Тогда onClickбудет шанс , что вас позвонят. Событие размытия все равно произойдет, только после onClick.

В конце концов, onClickсобытие представляет собой комбинацию onMouseDownи onMouseUp, если и только если они оба происходят в одном элементе.

Заменить на onmousedownс onfocus. Таким образом, это событие будет запускаться, когда фокус находится внутри текстового поля.

Заменить на onmouseupс onblur. В тот момент, когда вы уберете фокус с текстового поля, запустится onblur.

Думаю, это то, что вам может понадобиться.

ОБНОВЛЕНИЕ :

когда вы выполняете свою функцию onfocus -> удалите классы, которые вы будете применять в onblur, и добавьте классы, которые вы хотите выполнить, onfocus

и

когда вы выполняете свою функцию onblur -> удалите классы, которые вы будете применять в onfocus, и добавьте классы, которые вы хотите выполнить onblur

Я не вижу необходимости во флаговых переменных.

ОБНОВЛЕНИЕ 2:

Вы можете использовать события onmouseout и onmouseover

onmouseover - обнаруживает, когда курсор находится над ним.

onmouseout - обнаруживает, когда курсор уходит.

Более элегантное (но, вероятно, менее производительное) решение:

Вместо использования onblur ввода для удаления меню используйте document.onclick, которое срабатывает после onblur.

Однако это также означает, что меню удаляется при нажатии на сам вход, что является нежелательным поведением. Установите input.onclickс, event.stopPropagation()чтобы избежать распространения щелчков на событие щелчка документа.

изменить onclick на onfocus

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

Я сделал, и это сработало.

Вы можете использовать setIntervalфункцию внутри своего onBlurобработчика, например:

<input id="input" onblur="removeMenu()" ... />

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

setIntervalфункция удалить onBlur функцию из стека вызовов, добавить , потому что вы установите время на 0, эта функция будет вызвана сразу же после того, как другой обработчик события закончил