4

I'm using sveltekit goto function to navigate to a page using on:click on a div.

clickHandler: (id: string) => goto(`/app/profile/${id}/settings/general-info`)

How can I specify to open page in a new tab just like using CTRL + Click?

Vincent Karani
  • 61
  • 3
  • 1
    "on:click on a div" is bad. For accessibility, click events should only be attached on interactive elements that are supposed to be clicked, e.g. `button`. – H.B. Oct 25 '22 at 09:49
  • 1
    Does this answer your question? [Open a URL in a new tab (and not a new window)](https://stackoverflow.com/questions/4907843/open-a-url-in-a-new-tab-and-not-a-new-window) – H.B. Oct 25 '22 at 09:52
  • 2
    If an element is supposed to be a link, it should use an `a` tag, that way the user simply *can* use Ctrl-Click or the right click menu to open the link elsewhere. If you want the link to open in a new tab by default, just specify `target="_blank"`. – H.B. Oct 25 '22 at 10:01

2 Answers2

0

you can use a regular <a> element to create a link and specify target="_blank" to open it in a new tab.

here is an example of the the code.

<a href="https://svelte.dev" target="_blank">Svelte</a>

a live web environment showing that how it works. stackblitz Live Demo

Pushon
  • 15
  • 6
0

If you want to manage this from a ts/js file and the code is running client side then you can use window.open instead of goto -

window.open(`/app/profile/${id}/settings/general-info`, "_blank");
Biosonik
  • 43
  • 6