Skip to content

jQuery .load on left click, but normal element behavior on hover and middle/right click

I know how to make a button that will call a jQuery load function. I also know how to create a normal HTML a element.

However I do not know how to combine them so that when the link receives a left click, it will load() some data into a specific div on the current page, but will otherwise act as a normal a to a different page of the same website if it receives a middle or right click (to enable opening the link into a new tab).

Advertisement

Answer

In a jQuery click event the which property lets you know which mouse button was clicked. 1 is the left, 2 is the middle and 3 is the right.

As such you can listen for the left click and perform your load() call:

$('#foo').mousedown(function(e) {
  if (e.which === 1) {
    e.preventDefault();
    console.log('left click!');
    // $('#someElement').load(...);
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" id="foo">Click me</a>