HTML-Tag <a> möchte sowohl href als auch onclick funktionieren

123

Ich möchte nach dem HTML-Tag fragen

<a href="www.mysite.com" onClick="javascript.function();">Item</a>

Wie mache ich das zu einem Tag, das mit href und onClick funktioniert ? (lieber onClick läuft zuerst dann href)

231

Sie haben bereits das, was Sie brauchen, mit einer geringfügigen Änderung der Syntax:

<a href="www.mysite.com" onclick="return theFunction();">Item</a>

<script type="text/javascript">
    function theFunction () {
        // return true or false, depending on whether you want to allow the `href` property to follow through or not
    }
</script>

Das Standardverhalten der <a>Tags onclickund hrefEigenschaften besteht darin , das Ereignis auszuführen onclickund dann zu folgen, hrefsolange das onclicknicht zurückkehrt false, und das Ereignis abzubrechen (oder das Ereignis wurde nicht verhindert).

— Ian
quelle

Gibt es auch eine Möglichkeit, dies mit einer element.addEventListener-Funktion zu tun?

— TheEquah

4

Funktioniert bei mir nicht, bis ich href="#"dort anstelle einer echten URL eingefügt habe.

— yegor256

Ich verwende das Laravel-Framework. In meiner Blade-Ansicht habe ich Folgendes eingefügt: Es funktioniert nicht. Hat jemand dies mit Laravel versucht?

— Vajira Prabuddhaka

Diese Lösung funktioniert nicht, wenn ich eine Aktionsmethode habe, die in mvc controller in href aufgerufen wird. Kann jemand bitte helfen?

— DharaPPatel

10

Verwenden Sie jQuery . Sie müssen das clickEreignis erfassen und dann zur Website gehen.

$("#myHref").on('click', function() {
  alert("inside onclick");
  window.location = "http://www.google.com";
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="myHref">Click me</a>

Erweitern Sie das Snippet

— Sudipta Chatterjee
quelle

11

Ich werde kein Javascript-Framework verwenden. aber danke für Ihre Antwort

7

Oben ist kein tatsächlicher Link. Es kann nicht in einem neuen Tab geöffnet werden und ist eine sehr schlechte Praxis. Wenn etwas in einem neuen Tab geöffnet werden kann (hat eine URL), fügen Sie immer ein aussagekräftiges hrefAttribut hinzu.

— Nux

2

Um dies zu erreichen, verwenden Sie folgendes HTML:

<a href="www.mysite.com" onclick="make(event)">Item</a>

<script>
    function make(e) {
        // ...  your function code
        // e.preventDefault();   // use this to NOT go to href site
    }
</script>

Hier ist ein Arbeitsbeispiel .

— Kamil Kiełczewski
quelle

Dies funktioniert für mich in Chrome, aber Safari scheint die Funktion auszuführen, aber die href nicht zu öffnen ... irgendwelche Vorschläge?

— Ben

@ Ben Ich habe einen Test auf Geige ohne JS gemacht - nur reines HTML: <a href="http://example.com" >Item</a>und in Chrome sehe ich eine Meldung, damit die Seite diesen Link ausführen kann (Warnung am Ende der Chrome-URL-Leiste). Auf der Safari in der Konsole sehe ich folgende Warnung: [blockiert] Auf der Seite unter fiddle.jshell.net/_display durften keine unsicheren Inhalte von example.com angezeigt werden. Dies ist also wahrscheinlich ein Sicherheitsproblem (nur bei Geige?)

— Kamil Kiełczewski

1

Keine jQuery erforderlich.

Einige Leute sagen, dass das Verwenden onclickeine schlechte Praxis ist ...

In diesem Beispiel wird reines Browser-Javascript verwendet. Standardmäßig wird der Klick-Handler vor der Navigation ausgewertet, sodass Sie die Navigation abbrechen und auf Wunsch Ihre eigene Navigation durchführen können.

<a id="myButton" href="http://google.com">Click me!</a>
<script>
    window.addEventListener("load", () => {
        document.querySelector("#myButton").addEventListener("click", e => {
            alert("Clicked!");
            // Can also cancel the event and manually navigate
            // e.preventDefault();
            // window.location = e.target.href;
        });
    });
</script>

— TeamDman
quelle

-1

Verwenden Sie ng-clickanstelle von onclick. und so einfach ist das:

<a href="www.mysite.com" ng-click="return theFunction();">Item</a>

<script type="text/javascript">
function theFunction () {
    // return true or false, depending on whether you want to allow 
    // the`href` property to follow through or not
 }
</script>

— mak-273
quelle

Nur in AngularJS

— Corrodian