simulate ctrl + click with javascript or jquery (to open a new tab without focus)

Question

I am playing with the jquery event object but I am stuck as hell

I read the API https://api.jquery.com/category/events/event-object/ but it's not really helping here, I am not even sure it's a good lead to do that

Do you have any suggestion ( the problem is to do the exact ctrl + click on a link). I saw some posts about it but nothing seems to work on the recent browsers

very simple exemple :

<span id="toto">toto</span>
<a href="https://google.fr" id="inANewTab"></a>

// The goal is when I click on #toto, I would like #inANewTab trigger 
// in a new tab without focus. To do that I was thinking
// about replicate a ctrl+click event

$('#toto').click(function(){
  ???
})

Maybe have an event listener for the `ctrl` keyboard event, and then within that have a click event to do something? — Adjit, Dec 13 '15 at 19:47
@decarte. Were you able to find a solution for "replicate a ctrl+click event"? — Mark, Feb 03 '22 at 11:41

score 8 · Answer 1 · edited May 23 '17 at 11:54

8

Edit:

The Event object in jQuery has a parameter for ctrlKey, you could assign that as true, on click.

var e = jQuery.Event("click");
e.ctrlKey = true;
$('#id').trigger(e);

Reference: jquery trigger ctrl + click

edited May 23 '17 at 11:54

Community

1
1

answered Dec 13 '15 at 19:48

Sean Perkins

541
3
10

He needs to trigger Ctrl on the keyboard while clicking, not check! – Praveen Kumar Purushothaman Dec 13 '15 at 19:48
same (using Chrome) – Olivier Pons Oct 11 '16 at 05:58

score 8 · Answer 2 · answered Aug 15 '18 at 11:43

8

In pure javascript, you can use the MouseEvent for that:

document.getElementById("todo").dispatchEvent(new MouseEvent("click", {ctrlKey: true}));

To programatically open a new tab you can do that:

const a = document.createElement("a");
a.setAttribute("href", "https://www.google.com/");
a.dispatchEvent(new MouseEvent("click", {ctrlKey: true}));

answered Aug 15 '18 at 11:43

AkaZecik

980
2
11
16

3

This works in Chrome 78 for me, but not Firefox ESR 68. In fact, if ctrlKey is set to true then the click event stops working entirely in FF. – Elliot Nov 15 '19 at 21:15
Not enough jQuery. -1 – hanshenrik Mar 02 '23 at 09:18
@hanshenrik the question asks to provide a solution in javascript *OR* jquery, not both – AkaZecik Mar 03 '23 at 10:56
https://needsmorejquery.com/ – hanshenrik Mar 03 '23 at 10:58

score 4 · Answer 3 · answered Dec 13 '15 at 19:50

4

This is a non-jQuery version to simulate keyboard events. This works in both Chrome (WebKit based) and Firefox (Gecko based):

var keyboardEvent = document.createEvent("KeyboardEvent");
var initMethod = typeof keyboardEvent.initKeyboardEvent !== 'undefined' ? "initKeyboardEvent" : "initKeyEvent";


keyboardEvent[initMethod](
                   "keydown", // event type : keydown, keyup, keypress
                    true, // bubbles
                    true, // cancelable
                    window, // viewArg: should be window
                    false, // ctrlKeyArg
                    false, // altKeyArg
                    false, // shiftKeyArg
                    false, // metaKeyArg
                    40, // keyCodeArg : unsigned long the virtual key code, else 0
                    0 // charCodeArgs : unsigned long the Unicode character associated with the depressed key, else 0
);
document.dispatchEvent(keyboardEvent);

Or using jQuery, you can simulate by jQuery's event object:

jQuery.event.trigger({
  type:  'keypress',
  which: character.charCodeAt(0)
});

answered Dec 13 '15 at 19:50

Praveen Kumar Purushothaman

164,888
24
203
252

2

thx for your answer maybe I wasn't clear enough in my question. I don't really know how to exploit your answer. I edited the question – decarte Dec 13 '15 at 20:45
@hadesMM Inside your function, add mine. `:)` – Praveen Kumar Purushothaman Dec 13 '15 at 20:47
how to do this on a specific element? – Olivier Pons Oct 11 '16 at 05:58
This not only doesn't work for me, it's also deprecated now. – Vala Apr 20 '17 at 23:39
@Thor84no LoL. You are looking at an answer that was given two years ago. No wonder it is now deprecated. – Praveen Kumar Purushothaman Apr 21 '17 at 07:55
@PraveenKumar I'm aware of that. It's still however top of Google search results and with no decent alternative anywhere that I can see. – Vala Apr 21 '17 at 11:20
@Thor84no So it didn't work. What about the other answer to this question? – Praveen Kumar Purushothaman Apr 21 '17 at 12:25
1

Unfortunately not. Opening in a new tab works with either approach, but not in background. I can only assume it's down to pop-under blocking or something, which is a shame since I just want to do it for my own browser (snippets), not to anyone else. I've looked through similar SO questions and none of the answers seem to work anymore. – Vala Apr 23 '17 at 10:54
@Thor84no It still works with ██████████.com. I hate it when it comes and hides. Will see and let you know. – Praveen Kumar Purushothaman Apr 23 '17 at 12:19

simulate ctrl + click with javascript or jquery (to open a new tab without focus)

3 Answers3

Linked