Wie kann verhindert werden, dass ein Klick auf einen '#' - Link zum Seitenanfang springt?

Ich verwende derzeit <a>Tags mit jQuery, um Dinge wie Klickereignisse usw. zu initiieren.

Beispiel ist <a href="#" class="someclass">Text</a>

Aber ich hasse es, wie das '#' die Seite an den Anfang der Seite springt. Was kann ich stattdessen tun?

Wenn Sie in jQuery das Klickereignis behandeln, Geben Sie false zurück, um zu verhindern, dass der Link wie gewohnt reagiertVerhindern Sie, dass die Standardaktion "Besuch des hrefAttributs" ausgeführt wird (gemäß PoweRoys Kommentar und Eriks Antwort ):

$('a.someclass').click(function(e)
{
    // Special stuff to do when this link is clicked...

    // Cancel the default action
    e.preventDefault();
});

Das ist also alt, aber ... nur für den Fall, dass jemand dies bei einer Suche findet.

Verwenden Sie einfach "#/"anstelle von "#"und die Seite springt nicht.

Sie können es sogar einfach so schreiben:

<a href="javascript:void(0);"></a>

Ich bin mir nicht sicher, ob es ein besserer Weg ist, aber es ist ein Weg :)

Lösung Nr. 1: (einfach)

<a href="#!" class="someclass">Text</a>

Lösung 2: (benötigt javascript)

<a href="javascript:void(0);" class="someclass">Text</a>

Lösung 3: (benötigt jQuery)

<a href="#" class="someclass">Text</a>
<script>
$('a.someclass').click(function(e) {
    e.preventDefault();
});
</script>

Sie können dies verwenden event.preventDefault(), um dies zu vermeiden. Lesen Sie hier mehr: http://api.jquery.com/event.preventDefault/ .

Verwenden Sie einfach <input type="button" />anstelle von <a>und verwenden Sie CSS, um es so zu gestalten, dass es wie ein Link aussieht, wenn Sie dies wünschen.

Schaltflächen wurden speziell zum Klicken erstellt und benötigen keine href-Attribute.

Am besten erstellen Sie die Schaltfläche mithilfe der Onload-Aktion und hängen sie über Javascript an die gewünschte Stelle. Wenn Javascript deaktiviert ist, werden sie überhaupt nicht angezeigt und verwirren den Benutzer nicht.

Wenn Sie verwenden, erhalten href="#"Sie unzählige verschiedene Links, die auf denselben Speicherort verweisen. Dies funktioniert nicht, wenn der Agent JavaScript nicht unterstützt.

Wenn Sie einen Anker verwenden möchten, können Sie http://api.jquery.com/event.preventDefault/ wie die anderen vorgeschlagenen Antworten verwenden.

Sie können auch ein anderes Element wie eine Spanne verwenden und das Klickereignis daran anhängen.

$("span.clickable").click(function(){
alert('Yeah I was clicked');
});

Sie können #0als href verwenden, da 0die Seite nicht als ID zulässig ist und die Seite nicht springt.

<a href="#0" class="someclass">Text</a>

$('a[href="#"]').click(function(e) {e.preventDefault(); });

Benutz einfach

<a href="javascript:;" class="someclass">Text</a>

JQUERY

$('.someclass').click(function(e) { alert("action here"); }

Wenn das Element keinen aussagekräftigen href-Wert hat, handelt es sich nicht wirklich um einen Link. Warum also nicht stattdessen ein anderes Element verwenden?

Wie von Neothor vorgeschlagen, ist eine Spanne genauso angemessen und bei korrekter Gestaltung als Element sichtbar, auf das geklickt werden kann. Sie können sogar ein Hover-Ereignis anhängen, um das Element zum Leuchten zu bringen, wenn sich die Maus des Benutzers darüber bewegt.

Nachdem Sie dies gesagt haben, möchten Sie möglicherweise das Design Ihrer Site überdenken, damit sie ohne Javascript funktioniert, aber durch Javascript erweitert wird, wenn es verfügbar ist.

Links mit href = "#" sollten fast immer durch ein Schaltflächenelement ersetzt werden:

<button class="someclass">Text</button>

Die Verwendung von Links mit href = "#" ist ebenfalls ein Problem der Barrierefreiheit, da diese Links für Bildschirmleser sichtbar sind, die "Link - Text" auslesen. Wenn der Benutzer jedoch auf klickt, wird er nirgendwo hingehen.

Sie können einfach ein Ankertag ohne href-Eigenschaft übergeben und mit jQuery die erforderliche Aktion ausführen:

<a class="foo">bar</a>

Ich habe benutzt:

<a href="javascript://nop/" class="someClass">Text</a>

Der #/Trick funktioniert, fügt dem Browser jedoch ein Verlaufsereignis hinzu. Das Zurückklicken funktioniert also nicht so, wie es der Benutzer möchte / erwartet.

$('body').click('a[href="#"]', function(e) {e.preventDefault() }); ist der Weg, den ich gegangen bin, da er für bereits vorhandene Inhalte und alle Elemente funktioniert, die nach dem Laden zum DOM hinzugefügt wurden.

Insbesondere musste ich dies in einem Bootstrap-Dropdown-Menü innerhalb einer .btn-group(Referenz) tun, also tat ich Folgendes :

$('body').click('.dropdown-menu li a[href="#"]', function(e) {e.preventDefault() });

Auf diese Weise wurde es gezielt und hatte keinen Einfluss auf etwas anderes auf der Seite.

Ich habe immer verwendet:

<a href="#?">Some text</a>

beim Versuch, den Seitensprung zu verhindern. Ich bin mir nicht sicher, ob dies das Beste ist, aber es scheint seit Jahren gut zu funktionieren.

Es gibt 4 ähnliche Möglichkeiten, um zu verhindern, dass die Seite ohne JavaScript nach oben springt:

Option 1:

<a href="#0">Link</a>

Option 2:

<a href="#!">Link</a>

Option 3:

<a href="#/">Link</a>

Option 4 ( nicht empfohlen ):

<a href="javascript:void(0);">Link</a>

Es ist jedoch besser zu verwenden, event.preventDefault()wenn Sie das Klickereignis in jQuery übergeben.

Sie können auch false zurückgeben, nachdem Sie Ihre Abfrage verarbeitet haben.

Z.B.

$(".clickableAnchor").live(
    "click",
    function(){
        //your code
        return false; //<- prevents redirect to href address
    }
);

Ich benutze so etwas:

<a href="#null" class="someclass">Text</a>

Um zu verhindern, dass die Seite springt, müssen Sie nach dem Aufruf e.stopPropagation();Folgendes aufrufen e.preventDefault();:

stopPropagationverhindert, dass das Ereignis in den DOM-Baum aufgenommen wird. Weitere Informationen hier: https://api.jquery.com/event.stoppropagation/

Wenn Sie zu einem Ankerabschnitt auf derselben Seite migrieren möchten, ohne dass eine Seite hochspringt, verwenden Sie:

Verwenden Sie einfach "# /" anstelle von "#", z

<a href="#/home">Home</a>
<a href="#/about">About</a>
<a href="#/contact">contact</a> page will not jump up on click..

Wenn Sie etwas hinzufügen, wird #der Seitenfokus auf das Element mit dieser ID gesetzt. Die einfachste Lösung ist die Verwendung, #/auch wenn Sie jQuery verwenden. Wenn Sie das Ereignis jedoch in jQuery behandeln, event.preventDefault()ist dies der richtige Weg.

Das <a href="#!">Link</a>und<a href="#/">Link</a> funktioniert nicht, wenn man mehr als einmal auf denselben Eingang klicken muss. Es dauert nur 1 Ereignisklick für jeden auf mehrere Eingänge.

Der beste Weg ist immer noch mit <a href="#">Link</a>

dann,

event.preventDefault();