Question

我正在听同一输入元素上的onFocus和onClick事件。 onFocus应该始终设置为true的布尔值，而onClick事件处理程序应该切换此布尔值。

但是在 click 上，两个事件都首先用onFocus触发，因此布尔值首先设置为true，然后由{{1}切换}。我该如何改变这种行为？

我尝试在onClick事件处理程序中使用stopPropagation。另外设置onClick标志也无济于事。（可能是因为两个事件同时触发）（请参阅JSFiddle）

isClicked

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

在输入上第一次单击时，let input = document.getElementById("input"); let isOpen = false input.onclick = () => { isOpen = !isOpen } input.onfocus = () => { isOpen = true } input.onblur = () => { isOpen = false }标志应为 true ，但为 false 。

Answer 1

设置isOpen变量时会有一些混淆。我认为您应该使用此hasFocus的{{1}}属性来指示打开状态Get focus state of an element

或者您可以在设置之前验证element中isOpen的值

onClick()

由于在执行点击时会同时触发if (isOpen == false){ isOpen = true; }和onFocus，因此，如果在没有{{1}的情况下调用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 navigation-menu并以与实现不同的方式处理事件。

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

2 个答案: