Tag kotwicy HTML ze zdarzeniem onclick JavaScript

86

Korzystając z Google, odkryłem, że używają oni zdarzeń onclick w tagach kotwicy.

W większej opcji w części nagłówka google wygląda jak normalny tag, ale po kliknięciu nie zostaje przekierowany, ale otwiera menu. Zwykle podczas używania

<a href='more.php' onclick='show_more_menu()'>More >>></a>

Zwykle przechodzi do 'more.php' bez uruchamiania show_more_menu(), ale mam pokazane menu na tej stronie. Jak polubić Google ?

— bystre dziecko
źródło

117

Jeśli funkcja onclick zwróci wartość false, domyślne zachowanie przeglądarki zostanie anulowane. Takie jak:

<a href='http://www.google.com' onclick='return check()'>check</a>

<script type='text/javascript'>

function check()
{
    return false;
}

</script>

Tak czy inaczej, to, czy Google to robi, czy nie, nie ma większego znaczenia. Łatwiej jest wiązać funkcje onclick w javascript - w ten sposób oddzielisz swój HTML od innego kodu.

— TJHeuvel
źródło

3

1. Aby być bardziej pewnym, użyj # w href = "#" i wykonaj niezbędne czynności w javascript. Bezpieczne jest kliknięcie tego łącza za pomocą # href; strona nie opuszcza / przeładowuje url.

— Bimal Poudel

4

Postępuj ostrożnie zgodnie z powyższą radą, ponieważ reguły HTML5 wyraźnie stwierdzają, że href="#"ma prowadzić na górę strony. Możesz po prostu dodać hrefatrybut bez treści i uzyskać zachowanie kliknięcia. Podawanie #jako adresu URL prawdziwych stron (zamiast aplikacji o wysokości 100% pojedynczych stron) jest ogólnie złym pomysłem.

— Mike 'Pomax' Kamermans

54

Możesz nawet wypróbować poniższą opcję:

<a href="javascript:show_more_menu();">More >>></a>

— słońce2
źródło

1

Ostrzeżenie: jeśli funkcja zwraca jakąkolwiek jawną wartość (np. return null;, Ale nie return;), będzie to miało niezamierzone konsekwencje w niektórych przeglądarkach, takich jak FireFox. Strona zostanie zastąpiona całą zawartością zwróconą wartością w formacie ciągu (np .:) [object Object].

— rannmann

45

Z tego, co rozumiem, nie chcesz przekierowywać po kliknięciu linku. Możesz to zrobić :

<a href='javascript:;' onclick='show_more_menu();'>More ></a>

— Aditya Manohar
źródło

3

Jest to przydatne, gdy nie chcesz, aby href nigdzie wskazywał.

— kbpontius

Jest fajny i działa, ale jquery generuje błąd „Błąd: błąd składni, nierozpoznane wyrażenie: javascript :;”

— TheOddCoder

Używam jQuery w wersji 1.10.2 i nie pojawia się błąd składni, którego wystąpił @TheOddCoder.

— Mike Finch

1

Użyj poniższego kodu, aby wyświetlić menu, zamiast tego przejdź do adresu href

function show_more_menu(e) {
  if( !confirm(`Go to ${e.target.href} ?`) ) e.preventDefault();
}

<a href='more.php' onclick="show_more_menu(event)"> More >>> </a>

Rozwiń fragment

— Kamil Kiełczewski
źródło