Example to see what ignites link click event.

Mouse click and pressing enter with focus fire 'click' event. But keydown, keypress, keyup event of enter does not.

by kanonji

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<h1>Example to see what ignites link click event.</h1>
<p>Mouse click and pressing enter with focus fire 'click' event. But keydown, keypress, keyup event of enter does not.</p>

<hr>

<div>
  <a href="example.com" id="js-link">example.com</a>
</div>

<div>
  <p>Open console. Click buttons below. Focus avobe link with tab and press enter. See when click event ignited.</p>
  <button id="js-send-click">Send 'click' to link.</button>
  <button id="js-send-keydown-enter">Send 'keydown' Enter to link.</button>
  <button id="js-send-keypress-enter">Send 'keypress' Enter to link.</button>
  <button id="js-send-keyup-enter">Send 'keyup' Enter to link.</button>
</div>

JavaScript

$(function(){
	$('body').on('click', 'a', function(ev){
  	console.log('click: ', ev);
    ev.preventDefault();
  });
  $('body').on('keydown', 'a', function(ev){
  	console.log('keydown: ', ev);
  });
  $('body').on('keypress', 'a', function(ev){
  	console.log('keypress: ', ev);
  });
  $('body').on('keyup', 'a', function(ev){
  	console.log('keyup: ', ev);
  });

  $('#js-send-click').click(function(ev){
  	$('a#js-link').trigger(jQuery.Event('click'));
  });

  $('#js-send-keydown-enter').click(function(ev){
  	$('a#js-link').trigger(jQuery.Event('keydown', { keyCode: 13, which: 13 }));
  });

  $('#js-send-keypress-enter').click(function(ev){
  	$('a#js-link').trigger(jQuery.Event('keypress', { keyCode: 13, which: 13 }));
  });

  $('#js-send-keyup-enter').click(function(ev){
  	$('a#js-link').trigger(jQuery.Event('keyup', { keyCode: 13, which: 13 }));
  });
});