випуск замовлення onclick () та onblur ()

У мене є поле введення, яке відображає користувацьке спадне меню. Я хотів би наступної функціональності:

• Коли користувач натискає будь-яке місце поза полем введення, меню слід видалити.
• Якщо, більш конкретно, користувач натискає на div всередині меню, меню слід видалити, і повинна відбутися спеціальна обробка, на основі якої було натиснуто div.

Ось моя реалізація:

У полі введення є onblur()подія, яка видаляє меню (шляхом встановлення батьківського innerHTMLполя на порожній рядок) кожного разу, коли користувач клацне за межами поля введення. У дівах всередині меню також є onclick()події, які виконують спеціальну обробку.

Проблема полягає в тому, що onclick()події ніколи не спрацьовують при натисканні на меню, оскільки onblur()спочатку вводиться поле введення та видаляє меню, включаючи onclick()s!

Я вирішив цю проблему, розділивши меню divs ' 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елементи меню на an 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 не дуже добре уживаються, але, очевидно, онфокус і так onblur. оскільки навіть після закриття меню фокус все ще діє для елемента, натиснутого всередині.

Я так і працював.

Ви можете використовувати setIntervalфункцію всередині вашого onBlurобробника, наприклад:

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

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

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