16

Is there a way in jQuery or JavaScript to enable the user to CTRL + Click a link to open a link in a new tab like <a href="">example</a> element?

Here is an example of what I am talking about:-

jQuery('#some-link').bind('click', function() {
   window.location = 'http://someurl.com';
});

If you hold CTRL and click the 'some-link' element, it just opens the page within the current page when using the above code, any ideas on how do this?

nsilva
  • 5,184
  • 16
  • 66
  • 108
  • Have a look .. http://stackoverflow.com/questions/4907843/open-a-url-in-a-new-tab-using-javascript – saruftw Nov 09 '14 at 01:12
  • You will probably also want to check for a ctrl key press I think – DannyS3 Nov 09 '14 at 01:12
  • There are many keys that change the default behavior. You're better off using something like [`filter-altered-clicks`](https://github.com/bfred-it/filter-altered-clicks) to handle it for you. – fregante Oct 10 '16 at 17:00

3 Answers3

23

Check to see if the Ctrl key is pressed, and open the link using window.open. The link may not open in a new tab though. See the discussion here.

jQuery('#some-link').bind('click', function(e) {
   e.preventDefault(); 
   if (e.ctrlKey){
     window.open('http://someurl.com','_blank')
   }
});

See JSFiddle

Community
  • 1
  • 1
Bruno Calza
  • 2,732
  • 2
  • 23
  • 25
  • 3
    `if (e.metaKey)` could be better approach, since `e.ctrlKey` will work on Windows environment not in Mac, while `metaKey` will work in both – Max Feb 06 '17 at 15:06
  • 1
    @Max definitely appreciate trying to account for every device, but I couldn't actually get `e.metaKey` to work (at least on Windows), checking for either though seems to be working. – Brian Leishman Mar 22 '17 at 16:05
4

In case anyone wants to disable page navigation on regular click, to make an ajax call or something, but still wants to keep the default ctrl+click and right-click and middle-click(mouse scroll button) , that is the way:

$('#link').bind('click', function(e) {
  if (!e.ctrlKey && e.which != 2 && e.which != 3) {
    e.preventDefault();
    // some logic:
    $('#box').append('<br>').append($('<a>').html('not paging but doing something! Now try with CTRL'));
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
  <a id="link" href="http://stackoverflow.com/questions/26823884/">this question</a>
</div>

JQuery documentation says:

event.which also normalizes button presses (mousedown and mouseupevents), reporting 1 for left button, 2 for middle, and 3 for right. Use event.which instead of event.button.

Dorad
  • 3,413
  • 2
  • 44
  • 71
0

On Macintosh keyboards, this is the ⌘ Command key. On Windows keyboards, this is the Windows key (⊞ Windows).

For more see this page:

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/metaKey

Max Hesari
  • 631
  • 6
  • 10