Question

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

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

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

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

Answer 1

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

$("#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");
});

我也提出了demo on jsFiddle。感谢所有阅读此问题的人。

Answer 2

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

这不是您要求的功能，但我相信它可能会为您提供所需的功能。

例如。鼠标悬停选项5，你点击标签，现在你将5存储在变量中，禁止焦点到5直到其他东西被关注，但是一旦其他东西被关注，全局变回-1。

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

Answer 3

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

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}

}）;

jQuery click事件 - 如何判断鼠标是否被点击或输入键被按下了？

3 个答案: