IAcceptCookies: <a href="#"> ein paar Sekunden nach dem draufklicken ausführen?

Hallo, ich wollte auf meiner Website Animationen machen, wenn man auf einen Link drückt. Nur leider wird man dann ja direkt weitergeleitet. Gibt es einen Weg, die Weiterleitung für 1/2 Sekunden zu pausieren?

Danke schonmal für eure Hilfe.

akzeptierte Antworten

  1. Servus!

    Hallo, ich wollte auf meiner Website Animationen machen, wenn man auf einen Link drückt. Nur leider wird man dann ja direkt weitergeleitet. Gibt es einen Weg, die Weiterleitung für 1/2 Sekunden zu pausieren?

    Mit JavaScript: mit preventDefault wird das Standardverhalten unterdrückt, dann müsste Deine Animation kommen und dann aktivierst du den Link wieder.

    Herzliche Grüße

    Matthias Scharwies

    --
    Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
    1. Danke und wie würde ich das genau machen? Bin nicht wirklich vertraut mit Javascript. Angenommen ich möchte 0.5 Sekunden nachdem auf den Link geklickt wird weitergeleitet werden.

      1. Hallo ilikecookies,

        Danke und wie würde ich das genau machen? Bin nicht wirklich vertraut mit Javascript. Angenommen ich möchte 0.5 Sekunden nachdem auf den Link geklickt wird weitergeleitet werden.

        Vielleicht solltest du doch noch mal ernsthaft darüber nachdenken, ob das wirklich das ist, was die Gäste auf deiner Seite sehen wollen.

        Bis demnächst
        Matthias

        --
        Du kannst das Projekt SELFHTML unterstützen,
        indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
      2. Liebe(r) ilikecookies,

        Bin nicht wirklich vertraut mit Javascript.

        das wäre doch einschöner Grund, sich damit eingehender zu beschäftigen.

        Angenommen ich möchte 0.5 Sekunden nachdem auf den Link geklickt wird weitergeleitet werden.

        Dann wäre wichtig, dass das Linkziel eben genau nicht "#" lautet.

        Was Du benötigst, sind diese Stichworte:

        Liebe Grüße

        Felix Riesterer

        1. @@Felix Riesterer

          Bin nicht wirklich vertraut mit Javascript.

          das wäre doch einschöner Grund, sich damit eingehender zu beschäftigen.

          Die Schönheit des Grundes liegt im Auge des Betrachters.

          Ich bin da bei @Tabellenkalk und @Matthias Apsel, dass dies kein guter Grund ist, mit JavaScript-Spielereien eine funktionierende Seite zu suboptimieren.

          😷 LLAP

          --
          “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
          1. Lieber Gunnar,

            Ich bin da bei @Tabellenkalk und @Matthias Apsel, dass dies kein guter Grund ist, mit JavaScript-Spielereien eine funktionierende Seite zu suboptimieren.

            wir wissen doch nicht, um was für eine "Seite" es sich handelt. Die ganze Anfrage klingt für mich nach einem Teeny, welches mit den Möglichkeiten spielen will. Und wenn es sich dabei um eine Teeny-Seite handelt, auf der keine echten Inhalte, sondern nur Spielereien zum Ausprobieren sind, warum dann nicht auch die Frage beantworten, anstatt nur böse mit dem Zeigefinger zu winken?

            Liebe Grüße

            Felix Riesterer

        2. @@Felix Riesterer

          Was Du benötigst, sind diese Stichworte:

          Nein, das benötigt man nicht.

          document.links gibt’s schon. Zitat 2280 auch.

          Was aber auch noch benötigt wird:

          😷 LLAP

          --
          “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
          1. @@Gunnar Bittersmann

            Was Du benötigst, sind diese Stichworte:

            Nein, das benötigt man nicht.

            document.links gibt’s schon. Zitat 2280 auch.

            Aber auch das benötigt man nicht, wenn man event delegation einsetzt: click-Eventhandler für body, darin prüfen, ob der Auslöser (event.target) von einem Link stammt.

            Was aber auch noch benötigt wird:

            Ach, und noch was:

            😷 LLAP

            --
            “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
            1. Lieber Gunnar,

              Aber auch das benötigt man nicht, wenn man event delegation einsetzt: click-Eventhandler für body, darin prüfen, ob der Auslöser (event.target) von einem Link stammt.

              diese Dogmen stören mich. Natürlich dachte ich für mich an einen zentralen click-Handler. Aber was tue ich mit dem? Ich prüfe, ob event.target eines aus einer Liste ist, für die ich diesen Effekt haben möchte. Diese Liste erstelle ich mir mit einem querySelector, weil ich vielleicht nicht pauschal alle Elemente von document.links haben will.

              Eben. Vielleicht will ich nur Links mit diesem Effekt ausstatten, die von meiner Domain hinweg führen, oder eben gerade anders herum, nur diejenigen Links, die weiterhin auf meine Domain verweisen.

              Wir wissen ja nicht, um welche Art von Seite es sich handelt!

              Das habe ich in der Tat vergessen aufzulisten. Stimmt.

              Liebe Grüße

              Felix Riesterer

              1. Hallo Felix,

                was listet ihr nur die ganzen Lernpunkte auf. Die Fragestellung ist doch eindeutig: gebt mir Code zum abschreiben!

                Rolf

                --
                sumpsi - posui - obstruxi
                1. Lieber Rolf,

                  was listet ihr nur die ganzen Lernpunkte auf.

                  immer diese Lehrer...?!

                  Die Fragestellung ist doch eindeutig: gebt mir Code zum abschreiben!

                  Eben.

                  Liebe Grüße

                  Felix Riesterer

              2. @@Felix Riesterer

                Aber auch das benötigt man nicht, wenn man event delegation einsetzt: click-Eventhandler für body, darin prüfen, ob der Auslöser (event.target) von einem Link stammt.

                diese Dogmen stören mich.

                ??

                Natürlich dachte ich für mich an einen zentralen click-Handler. Aber was tue ich mit dem? Ich prüfe, ob event.target eines aus einer Liste ist, für die ich diesen Effekt haben möchte.

                Warum das? Zu prüfen, ob das event.target bestimmten Bedingungen genügt, dürfte performanter sein als zu prüfen, ob es in einer Liste (collection) vorkommt.

                if (event.target.nodeName === 'A')
                

                vs.

                if (document.links.includes(event.target))
                

                Diese Liste erstelle ich mir mit einem querySelector, weil ich vielleicht nicht pauschal alle Elemente von document.links haben will.

                Auch dafür brauchst du keine Liste zu erstellen:

                if (event.target.nodeName === 'A' && event.target.classList.contains('foo'))
                

                oder einfacher

                if (event.target.matches('a.foo'))
                

                vs.

                if (document.querySelectorAll('a.foo').includes(event.target))
                

                (document.querySelectorAll('a.foo') sollte dann natürlich außerhalb des Eventhandlers erledigt und in einer Variablen festgehalten werden. Der Punkt ist aber, dass man diese collection gar nicht braucht.)

                Eben. Vielleicht will ich nur Links mit diesem Effekt ausstatten, die von meiner Domain hinweg führen, oder eben gerade anders herum, nur diejenigen Links, die weiterhin auf meine Domain verweisen.

                if (event.target.matches('a[href*="example.net"]'))
                

                bzw.

                if (event.target.matches('a:not([href*="example.net"])'))
                

                Das alles funktioniert nur, wenn im a-Element kein weiteres Markup vorkommt (wovon man nicht ausgehen sollte).

                Wenn man in diesem Beispiel auf gelobte Land clickt, kommt B raus, nicht A.

                Man mus sich also erstmal von event.target zum a-Element hochhangeln:

                const anchor = event.target.closest('a');
                if (anchor?.matches(':not([href*="example.net"])')) {}
                

                😷 LLAP

                --
                “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
                1. Hallo Gunnar,

                  optional chaining Operator? Seit wann gips den denn?

                  Was die ECMA nicht alles von Java oder C# abschreibt...

                  Rolf

                  --
                  sumpsi - posui - obstruxi
  2. Hallo,

    Nur leider wird man dann ja direkt weitergeleitet.

    Andere versuchen alles, um die Performance zu optimieren. Warum möchtest du Besucher deiner Webseite absichtlich vergraulen?

    Gruß
    Kalk

    1. Hi there,

      Nur leider wird man dann ja direkt weitergeleitet.

      Andere versuchen alles, um die Performance zu optimieren. Warum möchtest du Besucher deiner Webseite absichtlich vergraulen?

      Ich mein' ja, aber ist es wirklich nicht möglich, einfach einmal eine technische Frage zu beantworten ohne sofort mit der Web-Taliban-Keule zu fuchteln? Du weißt ja nicht einmal, ob er überhaupt Besucher hat, auf seiner "Webseite". Wenn ich bei jedem Blödsinn, den ich in Javascript programmiert oder probiert hätte an die Benutzerfreundlichkeit oder gar die Barrierefreiheit meines Tuns gedacht hätte, dann hätt' ich vermutlich nicht einmal ein alert("ich mag Euch auch alle") zusammengebracht.

      Ich denke, es reicht ja, nachdem man sich am Technischen abgearbeitet hat, ein Hinweis, daß ein solches Vorgehen im RL eine schlechte Praxis wäre...

      1. Hallo,

        Ich denke, es reicht ja, nachdem man sich am Technischen abgearbeitet hat, ein Hinweis, daß ein solches Vorgehen im RL eine schlechte Praxis wäre...

        Das stimmt.

        Gruß
        Kalk