jquery 在焦点或点击上触发动作，但不能同时触发
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2458109/
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
jquery trigger action on focus or click but not both
提问by DA.
I have this sample code:
我有这个示例代码：
$myTrigger
.click(function(e){
alert('click');
})
.focus(function(e){
alert('focus');
$(this).click()
})
The intent is that I want something to happen when you click on $myTrigger. If, on the other hand, you tab onto it via the keyboard (ie, focus) I want the exact same thing to happen, so I ask it to click.
目的是当您单击 $myTrigger 时我希望发生某些事情。另一方面，如果你通过键盘（即焦点）点击它，我希望发生完全相同的事情，所以我要求它点击。
The catch is if I click on it, it also focuses. So both alerts are going off.
问题是如果我点击它，它也会聚焦。因此，两个警报都将关闭。
Is there a way to prevent the focus event from going off when clicking?
有没有办法防止焦点事件在单击时关闭？
UPDATE:
更新：
Ajm's comment got me thinking that I'm maybe asking the wrong thing.
Ajm 的评论让我觉得我可能问错了。
Question: Does a click event always also trigger focus in javascript (and/or in jQuery?). Can I assume whenever I want to handle both clicking with the mouse and tabbing-in with the keyboard, the focus() event will handle both?
问题：单击事件是否总是也会触发 javascript（和/或 jQuery？）中的焦点。我可以假设每当我想同时处理鼠标单击和键盘输入时，focus() 事件都会处理这两种情况吗？
Or is it dependent on the particular element that I'm attaching the events to? (In this case $myObject happens to be an anchor tag (link).
还是取决于我将事件附加到的特定元素？（在这种情况下， $myObject 恰好是一个锚标记（链接）。
回答by Nick Craver
回答by Walid
To trigger click() for TAB focus (and prevent click() from being triggered twice when focus comes from a mouse click), I did the following:
为了触发 TAB 焦点的 click()（并防止在焦点来自鼠标单击时触发 click() 两次），我执行了以下操作：
$('#item').mousedown(function(){
$(this).data("mouseDown", true);
});
$('#item').mouseup(function(){
$(this).removeData("mouseDown");
});
$('#item').focus(function(){
if (!$(this).data("mouseDown"))
$(this).click();
});
Does that work good for you?
这对你有好处吗？
回答by peterflynn
Another option is:
另一种选择是：
$myTrigger
.mousedown(function(e) {
e.preventDefault(); // don't grab focus
})
.click(function(e) {
alert('click');
})
.focus(function(e) {
alert('focus');
$(this).click()
});
This will leave the keyboard focus wherever it was before when clicking the button, while still allowing the button to become focused via Tab (or programmatically calling .focus()on it).
这将使单击按钮之前的键盘焦点保持在任何位置，同时仍然允许按钮通过 Tab（或以编程方式调用.focus()它）变为焦点。
回答by Matt Brunell
I ran into a similar problem a while back. I solved itby responding to the first event, and ignoring events for the next 20ms.
不久前我遇到了类似的问题。我通过响应第一个事件并忽略接下来 20 毫秒的事件来解决它。
Try something like this:
尝试这样的事情：
$(document).ready(OnReady);
var okToClick = true;
function OnReady() {
//Attach to both click and focus events
$("#item").click(PerformAction).focus(PerformAction);
}
function PerformAction() {
if (okToClick) {
okToClick = false;
// Do something interesting here...
setTimeout(function() { okToClick = true; }, 20);
}
}
回答by Thiago Belem
You can use only the focus()method and read this article about events (e) types on JavaScript: http://www.quirksmode.org/js/events_properties.html
您只能使用focus()方法并阅读有关 JavaScript 上事件 (e) 类型的这篇文章：http: //www.quirksmode.org/js/events_properties.html
To detect what event you got with you mouse or keyboard (to test it), u can use:
要检测您使用鼠标或键盘获得的事件（以测试它），您可以使用：
if (!e) var e = window.event;
alert(e.type);
回答by Adam
To prevent focus from being called twice set a variable to tell if the element has focus.
为了防止焦点被两次调用，设置一个变量来判断元素是否有焦点。
var hasFocus = false;
$('#myTrigger').focusIn(
function(){
hasFocus = true;
//do stuff
}
);
$('#myTrigger').focusOut(
function(){
hasFocus = false;
}
);
Put all functionality on focus and tell jQuery to set the foucus on the element when it is clicked if you run into a browser which doesn't do that.
将所有功能放在焦点上，并告诉 jQuery 在单击元素时将焦点设置在元素上，如果您遇到不这样做的浏览器。
$(#myTrigger).click( function(){ if(!hasFocus){$(#myTrigger).focus()}});
