HTML元素通过鼠标或键盘聚焦

Question

我如何找出html元素（假设 select -tag）通过鼠标单击，键盘或javascript函数得到焦点？

<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

我不相信有任何本地方法可以查看元素如何获得焦点（如果我错了，请正确！）。

但是，您可以在单击鼠标时可以执行诸如存储之类的事情，在使用键盘时存储，然后根据最后一个活动状态进行反应。

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事件处理程序。

Answer 2

使用document.activeElement，在所有主要浏览器中都支持它。它可以为您提供当前的活动元素。

编辑

糟糕，我想我误解了您的问题。您想确定鼠标或键盘或程序化

用于程序化if（e.hasownproperty（'Originalevent'））{ //手动触发焦点事件。}

区分基于键盘和鼠标的焦点事件您必须通过添加额外的键盘事件来破解它并理解。您无法像想要的那样区分它。

Answer 3

如果要检查Wheather＆lt;选择>由键盘或鼠标单击，您可以使用Mousedown（）和KeyPress（）event

$('select').mousedown(function(e){
  //your code on mouse select
});

和

$('select').keypress(function(e){
  //your code on key select
});