jQuery 单击事件 - 如何判断是否单击了鼠标或按下了 Enter 键？

Question

我对我的网站的可用性有疑问。我有一组选项卡，每个选项卡都包含一个表单。当您单击选项卡链接时，它将焦点置于选项卡内容正文中的第一个文本框。以鼠标为中心的人喜欢这个“功能”。问题是当面向键盘的用户使用键盘上的 TAB 键来浏览选项卡时。他们在想要查看的选项卡上按 Enter 键，单击事件触发并显示选项卡，但焦点会放在文本框上，从而完全调整其选项卡顺序。因此，当他们再次点击选项卡时，他们想要转到屏幕上的下一个选项卡，但由于焦点已移动到表单内，他们无法轻松使用键盘到达下一个选项卡。

因此，在单击事件中，我需要确定他们是否确实使用鼠标按钮单击了它。这可能吗？我的第一次尝试是这样的：

$("#tabs li a").click(function(e) {
  var tab = $(this.href);
  if(e.keyCode != 13)
    $("input:first", tab).focus();
});

但是 keyCode 始终为 0。which 属性也始终为 0。请帮忙！

Answer 1

这是我想出的解决方案，它非常简单。我在选项卡链接上捕获了 keydown，并在 keyCode 为 13 时触发了 click 事件。幸运的是， trigger< /code>函数允许我们将额外的参数传递给事件处理程序...

$("#tabs li a").keydown(function(e) {
  if(e.keyCode == 13) {
    $(this).trigger("click", true);
    e.preventDefault();
  }
});

所以我只需更改我的点击处理程序即可接收新参数并使用它...

$("#tabs li a").click(function(e, enterKeyPressed) {
  if(enterKeyPressed)
    alert("Enter key");
  else
    alert("Clicked");
});

我放置了一个 jsFiddle 上的演示。感谢所有阅读该问题的人。

Answer 2

对我有用的一个更简单的解决方案是仅检查事件中是否传递了任何鼠标坐标。

document.addEventListener('click', function(e) {
        //if the event object is passed with mouse coordinates, 
        if(e.screenX && e.screenY){
            //The mouse was clicked
        }else{//The enter key was pressed}

});

Answer 3

全局“焦点”变量是否有效，它会在给定选项卡上使用选项卡后禁用鼠标设置的焦点，直到鼠标移动到新块。

这不是您要求的功能，但我相信它可能会给您带来您想要的功能。

例如。鼠标悬停在选项 5 上，按下 Tab 键，现在将 5 存储在变量中，在聚焦于其他内容之前不允许将焦点设置为 5，但一旦聚焦于其他内容，全局就会变回 -1。

我承认这不是最干净的解决方法。