web-dev-qa-db-de.com

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

Ich habe einen Anker mit den Attributen beidesHREF und ONCLICK gesetzt. Wenn angeklickt und Javascript aktiviert ist, soll es onlyONCLICK ausführen und HREF ignorieren. Wenn Javascript deaktiviert oder nicht unterstützt wird, soll es der URL HREF folgen und ONCLICK ignorieren. Nachfolgend finden Sie ein Beispiel für meine Vorgehensweise, bei der das JS ausgeführt wird und gleichzeitig der Verknüpfung gefolgt wird (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>

Wie geht das am besten?

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 " ein href-Link wird ausgeführt und leitet die Seite um, bevor die Javascript-Onclick-Funktion beendet werden kann " gelesen, aber es verzögert nur HREF, deaktiviert es jedoch nicht vollständig. Ich suche auch nach etwas viel Einfacherem.

78
Supuhstar

Sie können die erste nicht bearbeitete Lösung verwenden, wenn Sie im onclick -Attribut als Erstes return eingeben:

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

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

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

Edit: Sorry, das scheint nicht zu funktionieren, du kannst stattdessen Folgendes tun:

<a href="http://example.com/no-js-login" onclick="yes_js_login(); return false;">Link</a>
56
Chris Bier

Deaktivieren Sie einfach das Standard-Browserverhalten mit preventDefault und übergeben Sie das event in Ihrem HTML.

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

yes_js_login = function(e) {
  e.preventDefault();
}
29
Buksy
<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 ordnen Klasse .ignore-click auf beliebig viele Elemente und Klicks auf diese Elemente werden ignoriert

14
Andrew

Sie können diesen einfachen Code verwenden:

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

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

<a href="#" onclick="yes_js_login(event);">link</a>
function yes_js_login(e) {
    e.stopImmediatePropagation();
}
5
Trigon219

Das 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 relativen Link an Google Docs Viewer

  1. Holen Sie sich die Volllink-Version des Ankers von this.href
  2. öffne den Link im 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">
1
marlo

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 handhabte, wobei die js-Funktion einen Verweis auf das aufrufende Element benötigt. In Javascript funktioniert "dies" nur im Zusammenhang mit einem Formularelement, z. B. einer Schaltfläche, als Selbstreferenz. Ich wollte keinen Button, nur das Aussehen 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 Attribute href und onClick 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 zu haben, hat nicht funktioniert.

1
Bo Johanson

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

Wenn in einem anderen Abschnitt mehr als zehn Elemente vorhanden waren, 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;
}
0

Das hat bei mir funktioniert:

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