Javascript onclick etkinliğine sahip HTML bağlantı etiketi

86

Google'ı kullanırken, bağlantı etiketlerinde onclick etkinliklerini kullandıklarını buldum.

In fazla google başlık kısmında seçeneği, normal bir etiket gibi görünüyor, ama yönlendirildi ama bir menü açılır almaz onclicking. Normalde kullanırken

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

Genellikle ateşlemeden 'more.php'ye gider show_more_menu(), ancak bu sayfanın kendisinde bir menü gösterdim. Google nasıl yapılır ?

— akıllı Çocuk
kaynak

120

Onclick işleviniz yanlış döndürürse, varsayılan tarayıcı davranışı iptal edilir. Gibi:

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

<script type='text/javascript'>

function check()
{
    return false;
}

</script>

Her iki durumda da, Google'ın yapıp yapmaması çok önemli değil. Onclick işlevlerinizi javascript içinde bağlamak daha temizdir - bu şekilde HTML'nizi diğer kodlardan ayırırsınız.

— TJHeuvel
kaynak

3

1. Daha emin olmak için, href = "#" içinde bir # kullanın ve javascript içinde gerekli şeyleri yapın. # Href ile bu bağlantıya tıklamak güvenlidir; sayfa url bırakıyor / yeniden yükleniyor.

— Bimal Poudel

5

href="#"Sayfanın en üstüne gitmesi gereken HTML5 kurallarında açıkça belirtildiği için yukarıdaki tavsiyeleri dikkatle uygulayın . hrefÖzelliği içerik olmadan ekleyebilir ve tıklama davranışını elde edebilirsiniz. #Gerçek sayfalar için url olarak atamak (% 100 yükseklikte tek sayfalık uygulamalar yerine) genellikle kötü bir fikirdir.

— Mike 'Pomax' Kamermans

Sadece bir not, bir CSS sınıfını bir öğeye bağlayıp ardından ayrıntılı stilleri ayrı bir CSS dosyasında belirtmeniz gibi, bir satır içi olay işleyici işlevini bir öğeye bağlamak ve ardından bu ayrı bir JS dosyasında çalışır. HTML dosyanız, web sayfanızın yapısını, görünümünü ve davranışını bildirdiğiniz yerdir. Ayrıntılı uygulamalar başka yerde bulunur. Gerçekten istediğin türden bir ayrılık bu.

— Sarsaparilla

54

Aşağıdaki seçeneği bile deneyebilirsiniz:

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

— güneş2
kaynak

1

Uyarı: İşlev herhangi bir açık değer döndürürse (örn: return null;ama değil return;), bunun FireFox gibi bazı tarayıcılarda istenmeyen sonuçları olacaktır. Sayfanın tüm içeriği, dize biçiminde döndürülen değerle değiştirilir (örn:) [object Object].

— rannmann

45

Anladığım kadarıyla bağlantı tıklandığında yeniden yönlendirmek istemiyorsunuz. Yapabilirsin :

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

— Aditya Manohar
kaynak

3

Bu, href'in herhangi bir yere işaret etmesini istemediğinizde yararlıdır.

— kbpontius

Harika ve çalışıyor ama jquery "Hata: Sözdizimi hatası, tanınmayan ifade: javascript :;" hatası veriyor

— TheOddCoder

JQuery 1.10.2 sürümünü kullanıyorum ve @TheOddCoder'ın yaşadığı sözdizimi hatasını alamıyorum.

— Mike Finch

1

Menüyü göstermek için aşağıdaki kodu kullanın, bunun yerine href adrese gidin

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>

Snippet'i genişlet

— Kamil Kiełczewski
kaynak