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

Question

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

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

</script>
//...

Using jQuery on a HTML page, the above defined click handler is executed

1. when the user clicks it and
2. when the user navigates to it via Tab and hits Enter

(At least in Firefox) there seems to be no difference between the click events passed to the handler - the original key event 'magically' translates to a click event.

Is there a way to differentiate between those two cases?

To give more details on why I need to treat those two cases differently: in my particular case the click handler sets the focus to a text input field. This text input field has a keyup event handler registered which sends an AJAX request. When the click handler was triggered after the user hitting Enter on the link, the keyup event is received by the now focused text input field and the AJAX request is sent mistakenly.

Answer 1

Is there a way to differentiate between those two cases?

Yes, there is (at least in Chrome):

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

You can check the detail property of the original event to get the click count. If the click count is 0, you know that the "click" came from the keyboard. If the click count is greater than 0, you know that the "click" came from the mouse.

Reference: https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail

Answer 2

If the event detail is === 0, it was fired by keyboard.

$('#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." />

Answer 3

One solution is to handle 'mouseup' instead of click:

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

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

</script>

The other solution is to handle both 'click' and 'keypress' and to return false if 'enter' is pressed:

<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 4

Probably a bit long method to handle this, but that worked : http://jsbin.com/azATuHe/3 ( Check 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();
  });