javascript 区分键盘/鼠标触发的焦点事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5653332/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Differentiate between focus event triggered by keyboard/mouse
提问by
I'm using jquery ui autocomplete and want to decipher between focus events triggered by keyboard interaction and mouse interaction. How would I go about this?
我正在使用 jquery ui 自动完成功能，并希望在键盘交互和鼠标交互触发的焦点事件之间进行破译。我该怎么办？
$('input').autocomplete({
source: function(request, response) {
...
},
focus: function(event, ui) {
// If focus triggered by keyboard interaction
alert('do something');
// If focus event triggered by mouse interaction
alert('do something else');
}
});
Thanks
谢谢
采纳答案by Richard Neil Ilagan
The only way I can think of doing this is to have a handler listen in on the keypressand clickevents, and toggle a boolean flag on/off. Then on the focushandler of your input, you can just check what the value of your flag is, and go from there.
我能想到的唯一方法是让处理程序监听keypress和click事件，并打开/关闭布尔标志。然后在focus输入的处理程序上，您可以检查标志的值是什么，然后从那里开始。
Probably something like
大概是这样的
var isClick;
$(document).bind('click', function() { isClick = true; })
.bind('keypress', function() { isClick = false; })
;
var focusHandler = function () {
if (isClick) {
// clicky!
} else {
// tabby!
}
}
$('input').focus(function() {
// we set a small timeout to let the click / keypress event to trigger
// and update our boolean
setTimeout(focusHandler,100);
});
Whipped up a small working prototype on jsFiddle (don't you just love this site?). Check it out if you want.
在 jsFiddle 上创建了一个小的工作原型（你不喜欢这个网站吗？）。如果您愿意，请检查一下。
Of course, this is all running off a focusevent on an <input>, but the focushandler on the autocomplete works in the same way.
当然，这都是运行在 上的focus事件<input>，但focus自动完成上的处理程序以相同的方式工作。
The setTimeoutwill introduce a bit of lag, but at 100ms, it might be negligible, based on your needs.
这setTimeout将引入一点延迟，但在 100 毫秒时，根据您的需要，它可能可以忽略不计。
回答by jfd
You should actually be able to determine this from the event-Object that is passed into the focus-event. Depending on your code structure this might be different, but there is usually a property called originalEventin there, which might be nested to some depth. Examine the event-object more closely to determine the correct syntax. Then test on mousenteror keydownvia regular expression. Something like this:
您实际上应该能够从传递到焦点事件的事件对象中确定这一点。根据您的代码结构，这可能会有所不同，但通常会originalEvent在其中调用一个属性，该属性可能嵌套到某个深度。event更仔细地检查-object 以确定正确的语法。然后在正则表达式上mousenter或keydown通过正则表达式进行测试。像这样的东西：
focus: function(event, ui){
if(/^key/.test(event.originalEvent.originalEvent.type)){
//code for keydown
}else{
//code for mouseenter and any other event
}
}
回答by Nick F
The easiest and most elegant way I've found of achieving this is to use the "What Input?" library. It's tiny (~2K minified), and gives you access to the event type both in scripts:
我发现实现这一目标的最简单、最优雅的方法是使用“什么输入？”库。它很小（约 2K 缩小），并允许您访问脚本中的事件类型：
if (whatInput.ask() === 'mouse') {
// do something
}
...and also (via a single data attribute that it adds to the document body) styles:
...还有（通过它添加到文档的单个数据属性body）样式：
[data-whatinput="mouse"] :focus,
[data-whatinput="touch"] :focus {
// focus styles for mouse and touch only
}
I particularly like the fact that where you just want a different visual behaviour for mouse / keyboard it makes it possible to do that in the stylesheet (where it really belongs) rather than via some hacky bit of event-checking Javascript (though of course if you do need to do something that's not just purely visual, the former approach lets you handle it in Javascript instead).
我特别喜欢这样一个事实，即您只想要鼠标/键盘的不同视觉行为，它可以在样式表（它真正属于的地方）中做到这一点，而不是通过一些 hacky 的事件检查 Javascript（当然，如果您确实需要做一些不仅仅是纯粹视觉的事情，前一种方法让您可以在 Javascript 中处理它）。
回答by DiegoSalazar
The first thing that comes to mind is that you can find the position of the mouse and check to see if its within the position of the element
首先想到的是你可以找到鼠标的位置并检查它是否在元素的位置内
Use this to store the position of the element:
使用它来存储元素的位置：
var input = $('#your_autocompleted_element_id'),
offset = input.offset(),
input_x = offset.top,
input_y = offset.left,
input_w = input.outerWidth(),
input_h = input.outerHeight();
Then use this to find absolute position of the mouse within the window:
然后使用它来查找窗口内鼠标的绝对位置：
var cur_mx, cur_my;
$(document).mousemove(function(e){
cur_mx = e.pageX;
cur_my = e.pageY;
});
Then in your autcomplete setup:
然后在您的自动完成设置中：
focus: function(event, ui) {
// mouse is doing the focus when...
// mouse x is greater than input x and less than input x + input width
// and y is greater than input y and less than input y + input height
if (cur_mx >= input_x && cur_mx <= input_x + input_w && cur_my >= input_y && cur_my <= input_y + input_h) {
// do your silly mouse focus witchcraft here
} else {
// keyboard time!
}
}
