如何区分JavaScript中的onClick和onFocus事件？

Question

我在同一个input-element上听onFocus和onClick事件。 onFocus应始终将布尔值设置为true ， onClick事件处理程序应切换此布尔值。

但是在点击时 ，首先使用onFocus两个事件，因此首先将布尔值设置为true ，然后通过onClick切换。 我该如何改变这种行为？

我试图在onClick事件处理程序中使用stopPropagation 。 设置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 。

Answer 1

在设置isOpen变量时会有一些混淆。 我认为你应该使用这个element hasFocus属性来指示开始状态获取元素的焦点状态

或者您可以在设置之前在onClick()验证isOpen的值

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

因为当您执行单击时会触发onFocus和onClick ，因此只需在没有onFocus情况下调用onClick时将isOpen设置为true（通过脚本以其他方式我们不知道）

Answer 2

这将解决您的问题。 它一次只允许一次更新。

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导航菜单和它处理事件的方式与您的实现不同。