javascript - 区分鼠标和键盘触发onclick

Question

我需要找到一种方法来确定链接是否已通过鼠标单击或按键激活。

<a href="" onclick="submitData(event, '2011-07-04')">Save</a>

这个想法是，如果他们使用鼠标点击链接，那么他们可以继续使用鼠标来选择下一步要做什么。但是，如果他们在页面上切换并切换到“保存”链接，那么我将打开下一行进行编辑(该页面就像一个电子表格，每一行都可以使用 ajax 进行编辑)。

我以为可以通过事件参数来查询按下了哪个鼠标按钮，但是当没有按下任何按钮时，答案是 0，这与鼠标左键相同。我以为我可以从事件中获取 keyCode，但返回时未定义，所以我假设鼠标事件不包含该信息。

function submitData(event, id)
{
    alert("key = "+event.keyCode + "  mouse button = "+event.button);
}

始终返回“键 = 未定义的鼠标按钮 = 0”

你能帮忙吗？

Answer 1

可以检查是否 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.');
  }
});

Demo on CodePen

我无法保证它适用于所有浏览器和所有情况，但它的好处是不尝试检测通过键盘完成的“点击”。因此，该解决方案可以更可靠地检测“点击”，但代价是检测是否来自键盘或鼠标的可靠性稍差。如果您更喜欢相反，请查看 answer from @Gonzalo .

注意:我发现使用此方法的一个地方是 Chromium