如何命令+单击以在新选项卡中打开 url 并在 JavaScript 中切换到它？

Question

There is a div element. The goal is to detect command+click to open some URL in the new tab and switch to the new tab . I've already done the detection and open.

The problem is: I use the same method to open URL: simply use window.open() . When I press command and click, it will not switch to the new tab . When I just click, it will switch.

<div
  onClick={(event) => {
    if (event.metaKey || event.ctrlKey) {
      // will not switch, but why?
      openLink('https://stackoverflow.com/');
    }
  }}
>
  command Click or ctrl Click
</div>

<div
  onClick={(event) => {
    // will switch
    openLink('https://stackoverflow.com/');
  }}
>
  just click
</div>     

So I am wondering how to make command+click to open a new tab and switch to it? Thanks for your help.

Here is a minimal code snippet on CodeSandbox .

Answer 1

Problem sovled. I add setTimeout to it and it will switch. However, I still do not know why...

<div onClick={(event) => {
  if (event.metaKey || event.ctrlKey) {
    // it works, but why?
     setTimeout(() => openLink("https://stackoverflow.com/"));
  }
}}>
  command Click or ctrl Click
</div>

Answer 2

Try using event.ctrlKey , it will return a boolean that indicates if ctrl is pressed or not

<div onClick={(event) => {
      if (event.metaKey || event.ctrlKey) {
        // will not switch, but why?
        openLink("https://stackoverflow.com/");
      }
    }}
  >
    command Click or ctrl Click
</div>

Answer 3

This will work but for both simple click and cmd+click.

<div onClick={()=> window.open("someLink", "_blank")}>text</div>