web-dev-qa-db-de.com

Wie kann verhindert werden, dass ein Klick auf den 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 die '#' die Seite zum Anfang der Seite springen lässt. Was kann ich stattdessen tun?

178
st4ck0v3rfl0w

In jQuery, wenn Sie das Click-Ereignis behandeln, geben Sie false zurück, um zu verhindern, dass der Link wie üblich reagiert verhindern, dass die Standardaktion ausgeführt wird, dh das Besuch des Attributs href (per Kommentar des PoweRoy und Eriks Antwort ):

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

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

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.

264
Chris

sie können es sogar so schreiben:

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

ich bin nicht sicher, dass es ein besserer Weg ist, aber es ist ein Weg :)

57
guy schaller

Lösung # 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>
22
Nabi K.A.Z.

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

14
Erik Töyrä

Verwenden Sie einfach <input type="button" /> anstelle von <a> und verwenden Sie CSS, um es wie ein Link auszusehen, wenn Sie möchten.

Schaltflächen werden speziell für das Klicken erstellt und benötigen keine href-Attribute.

Die beste Methode ist, die Onload-Aktion zu verwenden, um die Schaltfläche zu erstellen und sie dort anzuhängen, wo Sie sie über Javascript benötigen. Wenn Javascript deaktiviert ist, werden sie nicht angezeigt und verwirren den Benutzer nicht.

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

10
takeshin

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 einen Bereich verwenden und das Klickereignis daran anhängen.

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

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

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

Wenn das Element keinen aussagekräftigen href-Wert hat, ist es nicht wirklich ein Link. Warum also nicht ein anderes Element verwenden?

Wie von Neothor vorgeschlagen, ist eine Spanne ebenso angemessen und wird, wenn sie richtig gestaltet ist, als ein Element sichtbar, das angeklickt werden kann. Sie können sogar ein Hover-Ereignis anhängen, um das Element "aufleuchten" zu lassen, wenn sich der Mauszeiger darüber bewegt.

Wenn Sie dies gesagt haben, möchten Sie möglicherweise das Design Ihrer Website überdenken, sodass sie ohne Javascript funktioniert, jedoch durch Javascript erweitert wird, wenn sie verfügbar ist.

4
belugabob

Benutz einfach

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

JQUERY 

$('.someclass').click(function(e) { alert("action here"); }
4
Ayush
$('a[href="#"]').click(function(e) {e.preventDefault(); });
3
Praveen Manne

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

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

2
kingjeffrey

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

Verwenden Sie einfach "# /" anstelle von "#" z.B 

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

Ich habe benutzt:

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

Ich habe immer gebraucht:

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

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

2
Josh Harris

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 mit der Zugänglichkeit, da diese Links für Bildschirmleseprogramme sichtbar sind. Diese werden "Link - Text" vorlesen. Wenn der Benutzer jedoch klickt, kann er nicht weitergeleitet werden.

2
martinedwards

Ich benutze so etwas:

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

Der Trick #/ Funktioniert, fügt dem Browser jedoch ein Verlaufsereignis hinzu. Das Zurückklicken funktioniert also nicht so, wie der Benutzer es wünscht/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 dem DOM nach dem Laden hinzugefügt wurden.

Insbesondere musste ich dies in einem bootstrap Dropdown-Menü innerhalb eines .btn-group(Referenz) tun, also habe ich Folgendes getan:

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

Auf diese Weise wurde es gezielt und wirkte sich auf nichts anderes auf der Seite aus.

1
David

Um zu verhindern, dass die Seite springt, müssen Sie e.stopPropagation(); aufrufen, nachdem Sie e.preventDefault(); aufgerufen haben:

stopPropagation verhindert, dass das Ereignis in der DOM-Struktur angezeigt wird. Mehr Infos hier: https://api.jquery.com/event.stoppropagation/

1
anthonyjruffa

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

Z.B.

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

Es gibt vier ä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, event.preventDefault() zu verwenden, wenn Sie das Click-Ereignis in jQuery übergeben.

0
ExillustX

Der <a href="#!">Link</a> und der <a href="#/">Link</a> funktionieren nicht, wenn ein Eingang mehr als einmal angeklickt werden muss. Es wird nur ein Ereignis für jeden Klick auf mehrere Eingänge benötigt.

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

dann,

event.preventDefault();
0
Richard Rosario

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

0
Vivek Vijayan