double clicking a link causes it to behave like a native link, how to stop this? #17

aplhatester · 2023-04-13T15:31:34Z

aplhatester
Apr 13, 2023

Using alpine router v3.0.1. It doesn't seem to handle the links when I double click on them, causing the browser actually to try to fetch the URL.

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/router.min.js"></script>
    <script src="//unpkg.com/alpinejs" defer></script>
</head>

<body>
    <div x-data>
        <a href="/io">go to test</a>
    </div>
    <div x-data="router()">
        <template x-route="/" x-handler="home"></template>
        <template x-route="/io" x-handler="io"></template>
    </div>
    <div id="app" x-data></div>

    <script>
        function router() {
            return {
                settings: {},
                home(context) {
                    document.querySelector('#app').innerHTML = `Viewing        /`;
                },
                io(context) {
                    document.querySelector('#app').innerHTML = `Viewing        /io`;
                }
            };
        }
    </script>
</body>

</html>

rehhouari · 2023-04-14T00:15:59Z

rehhouari
Apr 14, 2023
Maintainer

Hey thats for the great report!
I've tried a couple things and I can't figure out the source of this problem. I'm using event.preventDefault() which should solve this but it doesnt. I've also tried .stopPropagation() and others with no use.

Until this is resolved (if it will be), I recommend that you should use other elements for double click events with $router.navigate(path) instead of anchors. See: https://ux.stackexchange.com/a/7406

If you got any more input feel free to comment ^^

4 replies

aplhatester Apr 16, 2023
Author

That's okay, I would use any other element for double click events but what if an user somehow double click on a link, the app would completely crash! One workaround I could see is to set up a server-side redirect for all non-existent routes to the root of the app, it won't be a pleasant experience though.

rehhouari Apr 16, 2023
Maintainer

Shouldn't you already do that to get client side routing to work in the first place? i mean redirecting all requests to the index. that's how SPA is set up. because double clicking is essentially reloading. from what i understand, in your case a user can't reload the page too?

aplhatester Apr 20, 2023
Author

Yes, I don't want the user to reload the app or mistakenly double click on something and going back to the homepage. Also what do you recommend to use to change the URL with elements other than the anchor tag?

rehhouari Jul 15, 2024
Maintainer

sorry for the very late feply stuff mustve happened and I forgot, for the element a button with @clicked="$router.navigate()" should do
hope you figured it out or found an alternative, sorry again time passed really fast

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

double clicking a link causes it to behave like a native link, how to stop this? #17

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 4 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

Select a reply

double clicking a link causes it to behave like a native link, how to stop this? #17

aplhatester Apr 13, 2023

Replies: 1 comment · 4 replies

rehhouari Apr 14, 2023 Maintainer

aplhatester Apr 16, 2023 Author

rehhouari Apr 16, 2023 Maintainer

aplhatester Apr 20, 2023 Author

rehhouari Jul 15, 2024 Maintainer

aplhatester
Apr 13, 2023

Replies: 1 comment 4 replies

rehhouari
Apr 14, 2023
Maintainer

aplhatester Apr 16, 2023
Author

rehhouari Apr 16, 2023
Maintainer

aplhatester Apr 20, 2023
Author

rehhouari Jul 15, 2024
Maintainer