12 
//...
<a href="#" id="foo-link">Foo</a>
<script type="text/javascript">

  $('#foo-link').click(function(e) {
    //...
  }

</script>
//...

在 HTML 页面上使用 jQuery，click执行上面定义的处理程序

  1. 当用户点击它并
  2. 当用户通过Tab导航到它并按Enter 键时

（至少在 Firefox 中）传递给处理程序的点击事件之间似乎没有区别 - 原始键事件“神奇地”转换为点击事件。

有没有办法区分这两种情况？

为了详细说明为什么我需要以不同的方式处理这两种情况：在我的特定情况下，单击处理程序将焦点设置为文本输入字段。这个文本输入字段有一个keyup注册的事件处理程序，它发送一个 AJAX 请求。当用户在链接上按Enter后触发点击处理程序时keyup，现在聚焦的文本输入字段接收到该事件，并且错误地发送了 AJAX 请求。

4

8 回答 8

13

有没有办法区分这两种情况？

是的，有（至少在 Chrome 中）：

$('#foo-link').click(function(event) {
    if (event.originalEvent.detail === 0) {
        // keyboard "click" event
    } else {
        // mouse "click" event
    }
}

您可以检查原始事件的详细属性以获取点击次数。如果点击计数为 0，则您知道“点击”来自键盘。如果点击次数大于 0，就知道“点击”来自鼠标。

参考：https ://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail

于 2017-06-29T18:19:33.220 回答
3

如果事件细节是=== 0，它是由键盘触发的。

$('#foo-link').click(function(e) {
  // e.detail should be enough in the latest version of jQuery.
  if (e.originalEvent.detail) {
    $(this).val('Fired by mouse.');
  } else {
    $(this).val('Fired by keyboard.');
  }
});
#foo-link {
  width: 120px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="foo-link" type="button" value="Press me." />

于 2018-04-12T07:24:35.773 回答
2

一种解决方案是处理“mouseup”而不是单击：

<a href="javascript:;" id="foo-link">Foo</a>
<script type="text/javascript">

      $('#foo-link').mouseup(function (e) {
              alert("Mouse click");
      });

</script>

另一种解决方案是同时处理 'click' 和 'keypress' 并在按下 'enter' 时返回 false：

<a href="javascript:;" id="foo-link">Foo</a>
<script type="text/javascript">

    $('#foo-link').click(function (e) {
        alert("Mouse click");
    });

    $('#foo-link').keypress(function (e) {
        if (e.which == 13)
            return false;
    });

</script>
于 2013-10-08T10:15:47.490 回答
1

处理这个问题的方法可能有点长，但是有效：http: //jsbin.com/azATuHe/3 （检查console.log）

 $('.txtB').on('keyup', function(e){ 
    if ( $('#anSetF').data('enterpressed' ) == true ) {
      console.log ( 'keyup triggered on TEXTBOX but suppressed' );
      $('#anSetF').data('enterpressed', false )
      return true;
  }else{
    console.log ( 'keyup triggered on TEXTBOX Fire AJAX now : ' +  $('#anSetF').data('enterpressed' ) );
    //Existing code to fire AJAX
  }


  });

$('#anSetF').on('keydown.Enter', function(e){
    console.log('KEY UP: ' + e.which );
    if ( e.which == 13 ){
       $(this).data('enterpressed',true);
    }
  }).on('click', function(){
      //Some code which you used to focus the textbox
      $('.txtB').focus();
  });
于 2013-10-08T10:44:27.123 回答
0

您可以只检查鼠标坐标的存在：

function handleClick(event) {
  if (!event.originalEvent.clientX && !event.originalEvent.clientY) {
    // Enter key pressed
  }
}

唯一不起作用的情况是单击页面左上角的像素时。在大多数情况下，这应该不是问题。

于 2021-06-18T23:46:25.633 回答
-1

我的脚本有类似的东西。但我最终使用.keyup而不是点击。它允许我检查单击了哪个按钮。

        $("#searching").keyup(function () {
        if (window.event.keyCode == 38 || window.event.keyCode == 40 || window.event.keyCode == 32) {
            return false;
        }
        var mystring = document.getElementById('searching').value;
        if (timeoutReference) clearTimeout(timeoutReference);
        if (!mystring.match(/\S/)) {

            $.ajax({
                    //Rest of code here..
于 2013-10-08T10:13:05.187 回答
-1

这应该工作

$('#foo-link').keyup(function(e) {
        if(e.which == 13)
            console.log('Enter is pressed');
});
于 2013-10-08T10:16:19.493 回答
-2

outline:0为您的链接制作。现在，用户无法通过标签查看链接上的大纲。所以，他不知道他在哪个按钮上，所以他不会点击 enter 键，但focus会在元素上，如果他按下 enter，做你的事，做你的事。即使不会设置outline:0仍然代码工作，因为重点是它。

于 2013-10-08T10:15:51.167 回答