javascript - html 元素通过鼠标或键盘获得焦点

Question

如何找出通过鼠标单击、键盘或 JavaScript 函数获得焦点的 HTML 元素(比如说 select 标签)？

<select onfocus="foo(event)"></select>

<script>
function foo(e) {
    if (e.??? == 'mouse') {
        //do something
    }
    else if (e.??? == 'keyboard') {
        //do something different
    }
}
</script>

我还尝试向元素添加 onclick 事件，但首先触发 onfocus 事件。

Answer 1

我不相信有任何本地方法可以查看元素如何获得焦点(如果我错了，请纠正我!)。

但是，您也许可以执行一些操作，例如单击鼠标时进行存储，使用键盘时进行存储，然后根据上次事件状态使用react。

var inputState = null;

document.addEventListener("click", handleClick);
document.addEventListener("keyup", handleKey);

function handleClick () {
    inputState = "mouse";
}

function handleKey () {
    inputState = "keyboard";
}

function foo() {
    if ( inputState === "mouse" ) {
         // mouse code   
    } else if ( inputState === "keyboard" ) {
         // keyboard code   
    } else {
         // Function was called directly   
    }

    // Reset input State after processing
    inputState = null
}

这可能需要一些调整，但我希望您可以使用它来找到正确的答案。

编辑:

我的答案是一个普通的 JS 解决方案，如果您可以访问 jQuery，您可能想研究一下 click 和 keyup 事件处理程序。