如何检测点击事件是否已由“Enter”触发

How to detect if click event has been triggered by 'Enter'?

本文关键字：是否 Enter 触发 事件 何检测 检测      更新时间：2023-09-26
//...
<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 请求。

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

是的，有(至少在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

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

<a href="javascript:;" id="foo-link">Foo</a>
<script type="text/javascript">
      $('#foo-link').mouseup(function (e) {
              alert("Mouse click");
      });
</script>

另一种解决方案是同时处理"单击"和"按键"，如果按下"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>

如果事件详细信息=== 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." />

处理这个问题的方法可能有点长，但这有效：http://jsbin.com/azATuHe/3 ( 检查控制台.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();
  });

您可以检查是否存在鼠标坐标：

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

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

我的脚本也有类似的东西。但我最终使用.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..

这应该有效 

$('#foo-link').keyup(function(e) {
        if(e.which == 13)
            console.log('Enter is pressed');
});

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

相关文章：