Question

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

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

</script>
//...

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

当用户点击时和
当用户通过标签导航至并点击 Enter

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

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

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

Answer 1

一种解决方案是处理'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>

Answer 2

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

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

Answer 3

可能有点长的方法来处理这个，但是有效： 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();
  });

Answer 4

如果事件详细信息为=== 0，则会被键盘触发。

＆＃13;

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

＆＃13;

#foo-link {
  width: 120px;
}

＆＃13;

<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." />

＆＃13;

Answer 5

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

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

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

Answer 6

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

Answer 7

为您的链接设置outline:0。现在，用户无法在标签上看到链接上的轮廓。所以，他不会知道他打开了哪个按钮，所以他不会点击输入键，但是focus会在元素上，如果他按下回车键，那么你的其他东西就是你的东西。即使不设置outline:0仍然代码有效，因为焦点在于它。

Answer 8

这应该有效

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

如何检测“输入”是否触发了点击事件？

8 个答案: