Prevent anchor links

[JuanitoFatas]

Hello.

Is there a way to prevent hovering anchor links being fetched? Something like:

document.addEventListener("instantpage:mouseover", (event) => {
  const anchorElement = event.target
  const isSamePageAnchor = (
    anchorElement.hash &&
    anchorElement.origin === window.location.origin &&
    anchorElement.pathname === window.location.pathname
  )

  if (isSamePageAnchor) return

  // do what instant page was doing
})

Does instantpage:mouseover event exist?

I could add data-no-instant to anchor links but I would like to keep the HTML clean.

Thanks and sorry if it‘s being asked already that I could not find it.

[JuanitoFatas]

I discovered it’s a bug of Firefox. Chrome and Safari won‘t preload anchor links. Closing this.

[bakura10]

Hi @JuanitoFatas @dieulot ,

I would like this to be re-opened, as I found this is causing an issue here. InstantPage will indeed preload links to an empty anchor (such as "#"). This is actually causing us an issue.

In our case, we are working on a Shopify theme, and we want to ensure that cart links are never preloaded. We therefore add a data-no-instant on the cart link we generate ourself.

However, we have had some merchants who enter in their navigation a link to "#" (just the hash character). If a merchant would actually be on the /cart page, and that the customer would hover such a link, anchorElement.href would effectively resolve to /cart and Instant.Page would preload the page, which is undesirable.

There should probably have an exception here to not preload this.