Wie kann ich HREF deaktivieren, wenn onclick ausgeführt wird?

94

Ich habe einen Anker mit beiden HREF und ONCLICKAttributen gesetzt. Wenn geklickt und Javascript aktiviert ist, soll es nur ausgeführt ONCLICKund ignoriert werden HREF. Wenn Javascript deaktiviert oder nicht unterstützt wird, möchte ich, dass es der HREFURL folgt und ignoriert ONCLICK. Unten ist ein Beispiel dafür, was ich tue, das JS ausführen und gleichzeitig dem Link folgen würde (normalerweise wird das JS ausgeführt und dann ändert sich die Seite):

<A HREF="http://example.com/no-js-login" ONCLICK="yes_js_login()">Log in</A>

Was ist der beste Weg, dies zu tun?

Ich hoffe auf eine Javascript-Antwort, aber ich akzeptiere jede Methode, solange sie funktioniert, insbesondere wenn dies mit PHP möglich ist. Ich habe bereits gelesen, dass ein href-Link die Seite ausführt und umleitet, bevor die JavaScript-Onclick-Funktion beendet werden kann , aber sie verzögert sich nur HREF, deaktiviert sie jedoch nicht vollständig. Ich suche auch etwas viel Einfacheres.

Supuhstar
quelle
4
Ich würde verwenden, um einen mit einem href und einen ohne zu verankern. Überprüfen Sie beim Laden der Seite, ob Javascript aktiviert ist. Wenn der richtige Anker angezeigt wird, zeigen Sie den anderen an.
Ewein
1
@ewein Warum? Das klingt nach einer Menge Markup für eine einfache Funktion.
Supuhstar

Antworten:

56

Sie können die erste nicht bearbeitete Lösung verwenden, wenn Sie im onclickAttribut return an die erste Stelle setzen :

<a href="https://example.com/no-js-login" onclick="return yes_js_login();">Log in</a>

yes_js_login = function() {
     // Your code here
     return false;
}

Beispiel: https://jsfiddle.net/FXkgV/289/

elproduc3r
quelle
1
Mir gefällt, wie sauber das ist! Die akzeptierte Lösung gibt mir jedoch mehr Kontrolle darüber, ob die HREF ignoriert wird
Supuhstar
In den letzten paar Jahren habe ich meine Meinung geändert; Dies ist eine bessere Lösung
Supuhstar
Wie gesund!
DrunkDevKek
Aber das funktioniert nicht mit JSX reagieren. Ob das funktioniert?
Coder
1
das hat viel zeit gespart.
Mark Lozano
60
    yes_js_login = function() {
         // Your code here
         return false;
    }

Wenn Sie false zurückgeben, sollte dies die Standardaktion verhindern (zur href gehen).

Bearbeiten: Entschuldigung, das scheint nicht zu funktionieren, Sie können stattdessen Folgendes tun:

<a href="http://example.com/no-js-login" onclick="yes_js_login(); return false;">Link</a>
Chris Bier
quelle
1
Die bearbeitete Antwort beantwortet die Frage nicht, da der eigentliche Link entfernt wird.
Itai Bar-Haim
11
alternativ onclick="return yes_js_login();"mit yes_js_loginRückgabe verwendenfalse
Uwe Kleine-König
1
@gogolin siehe meine Antwort.
Gabe Rogan
für alle, die noch stecken, kann diese Zeile hinzufügenevent.stopImmediatePropagation()
didxga
33

Deaktivieren Sie einfach das Standardverhalten des Browsers, indem Sie preventDefaultdas eventin Ihrem HTML- Code verwenden und übergeben .

<a href=/foo onclick= yes_js_login(event)>Lorem ipsum</a>

yes_js_login = function(e) {
  e.preventDefault();
}
Buksy
quelle
1
return false hat in Polymer nicht funktioniert ... obige Lösung hat funktioniert ... Danke
Paras Sachapara
16
<a href="http://www.google.com" class="ignore-click">Test</a>

mit jQuery:

<script>
    $(".ignore-click").click(function(){
        return false;
    })
</script>

mit JavaScript

<script>
        for (var i = 0; i < document.getElementsByClassName("ignore-click").length; i++) {
            document.getElementsByClassName("ignore-click")[i].addEventListener('click', function (event) {
                event.preventDefault();
                return false;
            });
        }
</script>

Sie weisen .ignore-clickso vielen Elementen eine Klasse zu, wie Sie möchten, und Klicks auf diese Elemente werden ignoriert

Andrew
quelle
Dies ist eine großartige Lösung! Ich habe es für Schaltflächen verwendet, bei denen beim Klicken eine Pseudoklasse .btn-loadingzum angeklickten Link hinzugefügt wird. Wenn dies erfolgreich ist, ersetzt ein Häkchen (bei Fehler ein X) die Ladeanimation. Ich möchte nicht, dass die Schaltfläche in einigen Fällen erneut angeklickt werden kann (sowohl für Erfolg als auch für Fehler). Auf diese Weise kann ich einfach $(elemnent).addClass('disabled')und einfach die Funktionalität erreichen, die ich auf elegante Weise gesucht habe!
Matthew Mathieson
14

Sie können diesen einfachen Code verwenden:

<a href="" onclick="return false;">add new action</a><br>
Mischanon
quelle
5

Es ist einfacher, wenn Sie einen Ereignisparameter wie folgt übergeben:

<a href="#" onclick="yes_js_login(event);">link</a>
function yes_js_login(e) {
    e.stopImmediatePropagation();
}
Trigon219
quelle
1
Das funktioniert bei mir nicht. Ich muss e.preventDefault ()
Milan Simek
2

Dies könnte helfen. Keine JQuery erforderlich

<a href="../some-relative-link/file" 
onclick="this.href = 'https://docs.google.com/viewer?url='+this.href; this.onclick = '';" 
target="_blank">

Dieser Code bewirkt Folgendes: Übergeben Sie den entsprechenden Link an Google Text & Tabellen-Viewer

  1. Holen Sie sich die Volllink-Version des Ankers von this.href
  2. Öffnen Sie den Link zum neuen Fenster.

In Ihrem Fall könnte dies also funktionieren:

<a href="../some-relative-link/file" 
onclick="this.href = 'javascript:'+console.log('something has stopped the link'); " 
target="_blank">
Marlo
quelle
1

Ich habe eine Situation gelöst, in der ich eine Vorlage für das Element benötigte, die alternativ eine reguläre URL oder einen Javascript-Aufruf verarbeiten würde, wobei die js-Funktion einen Verweis auf das aufrufende Element benötigt. In Javascript funktioniert "dies" als Selbstreferenz nur im Kontext eines Formularelements, z. B. einer Schaltfläche. Ich wollte keinen Button, nur das Erscheinen eines regulären Links.

Beispiele:

<a onclick="http://blahblah" href="http://blahblah" target="_blank">A regular link</a>
<a onclick="javascript:myFunc($(this));return false" href="javascript:myFunc($(this));"  target="_blank">javascript with self reference</a>

Die href- und onClick-Attribute haben dieselben Werte, außer dass ich bei onClick "return false" anhänge, wenn es sich um einen Javascript-Aufruf handelt. "Return false" in der aufgerufenen Funktion hat nicht funktioniert.

Bo Johanson
quelle
Warum gibt es zwei? Warum setzen Sie JS in die HREF?
Supuhstar
Supuhstar, Der eigentliche Code ist dynamisch, Javascript und generiert ein <a> -Element für mehrere hundert Elemente, die extern definiert werden. Jedes Element gibt entweder eine statische Linkadresse an, und dort sollte das generierte <a> -Element das reguläre "href-Verhalten" verwenden. Oder es wird ein Javascript-Funktionsaufruf für das Element angegeben. In diesem Fall wird das Verhalten des <a> -Elements basierend auf dem Kontext des Elements berechnet. Und im Code für den <a> -Generator wollte ich nur das kopieren, was für jedes Element angegeben ist, und nicht testen, ob es sich um eine Linkadresse oder einen Javascript-Funktionsaufruf handelt.
Bo Johanson
Ich verstehe nicht, wie dies meine Frage beantwortet. Wer hat gesagt, ich wollte mehrere hundert Links? Ich verstehe den Sinn all dessen oder sogar die Hälfte dessen, was Sie gerade gesagt haben, wirklich nicht.
Supuhstar
0

Das hat bei mir funktioniert:

<a href="" onclick="return false;">Action</a>
Null
quelle
Vielen Dank für Ihre Antwort und willkommen bei Stack Exchange! Leider scheint dies kein neues Wissen hinzuzufügen, da frühere Antworten dies bereits nahe legen. Wenn Sie einverstanden sind, ist es besser, diese zu verbessern. Wenn Sie nicht einverstanden sind, bearbeiten Sie bitte Ihre Antwort, damit Ihr neues Wissen ans Licht kommt!
Supuhstar
0

In meinem Fall hatte ich eine Bedingung, als der Benutzer auf das "a" -Element klickte. Die Bedingung war:

Wenn ein anderer Abschnitt mehr als zehn Elemente enthält, sollte der Benutzer nicht auf eine andere Seite umgeleitet werden.

Wenn in einem anderen Abschnitt weniger als zehn Elemente vorhanden waren, sollte der Benutzer auf eine andere Seite umgeleitet werden.

Die Funktionalität der "a" -Elemente hängt von der anderen Komponente ab. Der Code innerhalb des Klickereignisses lautet wie folgt:

var elementsOtherSection = document.querySelectorAll("#vehicle-item").length;
if (elementsOtherSection> 10){
     return true;
}else{
     event.preventDefault();
     return false;
}
Jorge Santos Neill
quelle