Как отличить события onClick и onFocus в JavaScript? - PullRequest
Новая
       42

Как отличить события onClick и onFocus в JavaScript?

0 голосов
/ 27 мая 2019

Я слушаю события onFocus и onClick на одном и том же элементе ввода.onFocus должен всегда устанавливать логическое значение на true, а обработчик события onClick должен переключать это логическое значение.

Но при нажатии оба события сначала запускаются с onFocus, поэтому логическое значение сначала устанавливается на true, а затем переключается с помощью onClick.Как я могу изменить это поведение?

Я пытался использовать stopPropagation внутри обработчика событий onClick.Также установка флага isClicked не помогла.(Возможно, потому что оба события срабатывают одновременно) (см. JSFiddle) 

let input = document.getElementById("input");
let isOpen = false

input.onclick = () => {
    isOpen = !isOpen
}

input.onfocus = () => {
    isOpen = true
}

input.onblur = () => {
    isOpen = false
}

JSFiddle: http://jsfiddle.net/coh29gwe/7/

При первом щелкнуть на входе флаг isOpen должен быть true , но false .

Ответы [ 2 ]

0 голосов
/ 28 мая 2019

Это решит вашу проблему.Это позволит только одно обновление за один раз. 

let input = document.getElementById("input");
let isOpen = false

let updated = false;
function updateOpenedStatus(newStatus) {
    if (!updated) {
        isOpen = newStatus;
        updated = true;
        setTimeout(() => updated = false, 0);
    }
}

input.onclick = () => {
    updateOpenedStatus(!isOpen);
}

input.onfocus = () => {
    updateOpenedStatus(true);
}

input.onblur = () => {
    updateOpenedStatus(false);
}

Однако, как кажется, вы, возможно, захотите изменить поведение в целом, так как это aria navigation-menu , и это обрабатывает события по-разному.из вашей реализации.

0 голосов
/ 27 мая 2019

Есть некоторые путаницы, когда вы устанавливаете переменную isOpen. Я думаю, вы должны использовать hasFocus свойство этого element, чтобы указать состояние открытия Получить состояние фокуса элемента

или вы можете проверить значение isOpen в onClick(), прежде чем его установить 

if (isOpen == false){
    isOpen = true;
}

Поскольку оба из onFocus и onClick запускаются при выполнении щелчка, таким образом, вам нужно установить isOpen в true только тогда, когда onClick вызывается без onFocus (через сценарий другим способом, который мы делаем не знаю)

...