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

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.

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/

    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>

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();
}

<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

Sie können diesen einfachen Code verwenden:

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

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();
}

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">

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.

Das hat bei mir funktioniert:

<a href="" onclick="return false;">Action</a>

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;
}