javascript 鼠标和键盘触发 onclick 的区别
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7465006/
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 mouse and keyboard triggering onclick
提问by Craig
I need to find a way to determine if a link has been activated via a mouse click or a keypress.
我需要找到一种方法来确定链接是否已通过鼠标单击或按键激活。
<a href="" onclick="submitData(event, '2011-07-04')">Save</a>
The idea is that if they are using a mouse to hit the link then they can keep using the mouse to choose what they do next. But if they tabbing around the page and they tab to the Save link, then I'll open then next line for editing (the page is like a spreadsheet with each line becoming editable using ajax).
这个想法是，如果他们使用鼠标点击链接，那么他们可以继续使用鼠标来选择下一步做什么。但是，如果他们在页面上切换并切换到“保存”链接，那么我将打开下一行进行编辑（该页面就像一个电子表格，每一行都可以使用 ajax 进行编辑）。
I thought the event parameter could be queried for which mouse button is pressed, but when no button is pressed the answer is 0 and that's the same as the left mouse button. They I thought I could get the keyCode from the event but that is coming back as undefined so I'm assuming a mouse event doesn't include that info.
我认为可以查询事件参数以了解按下了哪个鼠标按钮，但是当没有按下任何按钮时，答案为 0，这与鼠标左键相同。他们我以为我可以从事件中获取 keyCode ，但它以未定义的形式返回，所以我假设鼠标事件不包含该信息。
function submitData(event, id)
{
alert("key = "+event.keyCode + " mouse button = "+event.button);
}
always returns "key = undefined mouse button = 0"
总是返回“key = undefined mouse button = 0”
Can you help?
你能帮我吗？
采纳答案by AlienWebguy
You can create a condition with event.type
您可以创建一个条件 event.type
function submitData(event, id)
{
if(event.type == 'mousedown')
{
// do something
return;
}
if(event.type == 'keypress')
{
// do something else
return;
}
}
Note: You'll need to attach an event which supports both event types. With JQuery it would look something like $('a.save').bind('mousedown keypress', submitData(event, this));
注意：您需要附加一个支持这两种事件类型的事件。使用 JQuery，它看起来像$('a.save').bind('mousedown keypress', submitData(event, this));
The inline onClick=""will not help you as it will always pass that click event since that's how it's trapped.
内联onClick=""不会帮助你，因为它总是会传递那个点击事件，因为它就是这样被困住的。
EDIT: Here's a working demoto prove my case with native JavaScript: http://jsfiddle.net/AlienWebguy/HPEjt/
编辑：这是一个工作演示，用原生 JavaScript 证明我的情况：http: //jsfiddle.net/AlienWebguy/HPEjt/
I used a button so it'd be easier to see the node highlighted during a tab focus, but it will work the same with any node.
我使用了一个按钮，因此在选项卡焦点期间更容易看到突出显示的节点，但它对任何节点的工作方式都相同。
回答by Wernight
Could check if event.screenXand event.screenYare zero.
可以检查event.screenX和event.screenY是否为零。
$('a#foo').click(function(evt) {
if (evt.screenX == 0 && evt.screenY == 0) {
window.alert('Keyboard click.');
} else {
window.alert('Mouse click.');
}
});
I couldn't find a guarantee that it works in all browsers and all cases, but it has the benefit of not trying to detect a "click" done via the keyboard. So this solution detects "click" more reliably at the cost of detecting if it's from keyboard or mouse somewhat less reliably. If you prefer the reverse, look as the answer from @Gonzalo.
我无法保证它适用于所有浏览器和所有情况，但它的好处是不尝试检测通过键盘完成的“点击”。因此，该解决方案更可靠地检测“点击”，但代价是检测它是来自键盘还是鼠标的可靠性稍差。如果您更喜欢相反的方式，请查看@Gonzalo的答案。
Note: One place I found using this method is Chromium
注意：我发现使用这种方法的一个地方是Chromium
回答by Yvain
You can use event.detail
您可以使用 event.detail
if(event.detail === 0) {
// keypress
} else {
// mouse event
}
回答by Gonzalo Larralde
You can differentiate between a click and a keyboard hit capturing and discarding the keydown event originated at the moment of the key press:
您可以区分单击和键盘点击捕获和丢弃在按键时产生的 keydown 事件：
jQuery(function($) {
$("a#foo").keydown(function() {
alert("keyboard");
return false;
}).click(function() {
alert("mouse");
return false;
})
})
回答by Célia
I know this is an old question but given how much time I lost looking for a working, no jquery and IE-compatible solution, I think it won't be a bad idea to put it here (where I came first).
我知道这是一个老问题，但考虑到我浪费了多少时间寻找一个有效的、没有 jquery 和 IE 兼容的解决方案，我认为把它放在这里（我首先来的地方）并不是一个坏主意。
I tested this and found it working fine :
我对此进行了测试，发现它工作正常：
let mouseDown = false;
element.addEventListener('mousedown', () => {
mouseDown = true;
});
element.addEventListener('mouseup', () => {
mouseDown = false;
});
element.addEventListener('focus', (event) => {
if (mouseDown) {
// keyboard
} else {
// mouse
}
});
Source link : https://www.darrenlester.com/blog/focus-only-on-tab
回答by SLaks
Handle the mouseupevent.
If you get a clickright afterwards, it was probablydone with the mouse.
处理mouseup事件。
如果你click后来得到了一个正确的，它可能是用鼠标完成的。
