Jak zapobiec przeskakiwaniu kliknięcia linku „#” na górę strony?

Obecnie używam <a>tagów z jQuery do inicjowania rzeczy takich jak zdarzenia kliknięcia itp.

Przykładem jest <a href="#" class="someclass">Text</a>

Ale nienawidzę tego, jak „#” powoduje, że strona przeskakuje na górę strony. Co mogę zamiast tego zrobić?

W jQuery podczas obsługi zdarzenia click zwraca false, aby zatrzymać odpowiedź linku w zwykły sposóbuniemożliwić wykonanie domyślnej akcji hrefpolegającej na odwiedzeniu atrybutu (zgodnie z komentarzem PoweRoy i odpowiedzią Erika ):

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

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

To jest stare, ale ... na wypadek, gdyby ktoś znalazł to podczas wyszukiwania.

Wystarczy użyć "#/"zamiast, "#"a strona nie przeskoczy.

możesz nawet napisać to tak:

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

nie jestem pewien, czy to lepszy sposób, ale jest to sposób :)

Rozwiązanie nr 1: (zwykłe)

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

Rozwiązanie nr 2: (potrzebne javascript)

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

Rozwiązanie nr 3: (potrzebne jQuery)

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

Możesz użyć, event.preventDefault()aby tego uniknąć. Przeczytaj więcej tutaj: http://api.jquery.com/event.preventDefault/ .

Wystarczy użyć <input type="button" />zamiast <a>i użyj CSS, aby stylizować go tak, aby wyglądał jak link, jeśli chcesz.

Przyciski są stworzone specjalnie do klikania i nie wymagają żadnych atrybutów href.

Najlepszym sposobem jest użycie akcji onload, aby utworzyć przycisk i dołączyć go w razie potrzeby za pomocą javascript, więc przy wyłączonym javascript nie będą się w ogóle wyświetlać i nie dezorientują użytkownika.

Podczas korzystania href="#"dostajesz mnóstwo różnych linków prowadzących do tej samej lokalizacji, co nie będzie działać, gdy agent nie obsługuje JavaScript.

Jeśli chcesz użyć kotwicy, możesz użyć http://api.jquery.com/event.preventDefault/, podobnie jak inne sugerowane odpowiedzi.

Możesz także użyć dowolnego innego elementu, takiego jak zakres, i dołączyć do niego zdarzenie click.

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

Możesz użyć #0jako href, ponieważ 0nie jest dozwolony jako identyfikator, strona nie przeskoczy.

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

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

Po prostu użyj

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

JQUERY

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

Jeśli element nie ma znaczącej wartości href, to tak naprawdę nie jest to link, więc dlaczego nie użyć innego elementu?

Jak sugeruje Neothor, rozpiętość jest tak samo odpowiednia, a jeśli zostanie poprawnie zaprojektowana, będzie wyraźnie widoczna jako element, który można kliknąć. Możesz nawet dołączyć zdarzenie aktywowania, aby elemnt „zapalił się”, gdy mysz nad nim przesunie się.

Jednak powiedziawszy to, możesz przemyśleć projekt swojej witryny, aby działała bez javascript, ale jest ulepszona przez javascript, gdy jest dostępny.

Linki z href = "#" powinny prawie zawsze zostać zastąpione elementem przycisku:

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

Korzystanie z linków z href = "#" również stanowi problem w zakresie dostępności, ponieważ linki te będą widoczne dla czytników ekranu, które będą czytać "Link - tekst", ale jeśli użytkownik kliknie, nigdzie nie przejdzie.

Możesz po prostu przekazać tag zakotwiczenia bez właściwości href i użyć jQuery do wykonania wymaganej akcji:

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

Używałem:

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

#/Sztuczka działa, ale dodaje zdarzenie historię w przeglądarce. Zatem kliknięcie wstecz nie działa tak, jak użytkownik może tego oczekiwać / oczekiwać.

$('body').click('a[href="#"]', function(e) {e.preventDefault() }); jest to sposób, w jaki poszedłem, ponieważ działa na już istniejącą zawartość i wszelkie elementy dodane do DOM po załadowaniu.

W szczególności musiałem to zrobić w menu rozwijanym bootstrap w .btn-group(Reference) , więc:

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

W ten sposób był ukierunkowany i nie wpływał na nic innego na stronie.

Zawsze używałem:

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

podczas próby uniknięcia przeskoku strony. Nie jestem pewien, czy to jest najlepsze, ale wydaje się, że działa dobrze od lat.

Istnieją 4 podobne sposoby zapobiegania przeskakiwaniu strony na górę bez użycia JavaScript:

Opcja 1:

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

Opcja 2:

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

Opcja 3:

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

Opcja 4 ( niezalecana ):

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

Ale lepiej jest użyć, event.preventDefault()jeśli przekazujesz zdarzenie click w jQuery.

Możesz również zwrócić wartość false po przetworzeniu swojej jquery.

Na przykład.

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

Używam czegoś takiego:

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

Aby zapobiec przeskakiwaniu strony, musisz zadzwonić e.stopPropagation();po zadzwonieniu e.preventDefault();:

stopPropagationzapobiega wejściu zdarzenia do drzewa DOM. Więcej informacji tutaj: https://api.jquery.com/event.stoppropagation/

Jeśli chcesz przeprowadzić migrację do sekcji zakotwiczenia na tej samej stronie bez przeskakiwania strony, użyj:

Wystarczy użyć „# /” zamiast „#” np

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

Dodanie czegoś po #ustawia fokus strony do elementu o tym identyfikatorze. Najprostszym rozwiązaniem jest użycie, #/nawet jeśli używasz jQuery. Jednak jeśli zajmujesz się zdarzeniem w jQuery, event.preventDefault()jest to dobra droga.

<a href="#!">Link</a>I <a href="#/">Link</a>nie zadziała, jeśli trzeba kliknąć na samym wejściu więcej niż jeden raz .. to tylko w 1 zdarzenie kliknięcia dla każdego na wielu nakładów.

wciąż najlepszym sposobem jest <a href="#">Link</a>

następnie,

event.preventDefault();