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

Odpowiedzi:

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>

Kamil Kiełczewski
źródło