Tag jangkar HTML dengan peristiwa onclick Javascript

86

Saat menggunakan Google, saya menemukan bahwa mereka menggunakan acara onclick di tag jangkar.

Di lebih banyak opsi di bagian header google, sepertinya tag biasa, tetapi setelah mengklik itu tidak diarahkan tetapi membuka menu. Biasanya saat menggunakan

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

Biasanya pergi ke 'more.php' tanpa mengaktifkan show_more_menu(), tetapi saya telah menunjukkan menu di halaman itu sendiri. Bagaimana melakukan like google ?

— smartkid
sumber

120

Jika fungsi onclick Anda mengembalikan false, perilaku browser default dibatalkan. Dengan demikian:

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

<script type='text/javascript'>

function check()
{
    return false;
}

</script>

Bagaimanapun, apakah google melakukannya atau tidak tidak terlalu penting. Lebih bersih untuk mengikat fungsi onclick Anda dalam javascript - dengan cara ini Anda memisahkan HTML dari kode lain.

— TJHeuvel
sumber

3

1. Untuk lebih yakin, gunakan # in href = "#" dan lakukan hal-hal yang diperlukan di dalam javascript. Aman untuk mengeklik tautan itu dengan # href; halaman meninggalkan / memuat ulang url.

— Bimal Poudel

5

Ikuti saran di atas dengan hati-hati, karena aturan HTML5 secara eksplisit menyatakan yang href="#"seharusnya mengarah ke bagian atas halaman. Anda cukup menambahkan hrefattibute tanpa konten, dan mendapatkan perilaku klik. Memasukkan #sebagai url untuk halaman nyata (Daripada aplikasi satu halaman dengan tinggi 100%) umumnya merupakan ide yang buruk.

— Mike 'Pomax' Kamermans

Sekadar catatan, dengan cara yang sama Anda mengikat kelas CSS ke sebuah elemen dan kemudian menentukan gaya mendetail dalam file CSS terpisah, sangat baik untuk mengikat fungsi penangan kejadian sebaris ke sebuah elemen, dan kemudian menentukan implementasi mendetail dari fungsi itu dalam file JS terpisah. File HTML Anda adalah tempat Anda mendeklarasikan struktur, tampilan, serta perilaku halaman web Anda. Implementasi terperinci berada di tempat lain. Pemisahan seperti itulah yang Anda inginkan.

— Sarsaparilla

54

Anda bahkan dapat mencoba opsi di bawah ini:

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

— matahari2
sumber

1

Peringatan: Jika fungsi mengembalikan nilai eksplisit apa pun (mis .: return null;, tetapi tidak return;), ini akan memiliki konsekuensi yang tidak diinginkan di beberapa browser, seperti FireFox. Halaman tersebut akan memiliki semua konten diganti dengan nilai yang dikembalikan dalam format string (mis [object Object]. :) .

— rannmann

45

Dari apa yang saya pahami Anda tidak ingin mengarahkan saat link diklik. Anda dapat melakukan :

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

— Aditya Manohar
sumber

3

Ini berguna jika Anda tidak ingin href mengarah ke mana pun.

— kbpontius

Ini keren dan berfungsi, tetapi jquery menampilkan kesalahan "Kesalahan: Kesalahan sintaksis, ekspresi tidak dikenal: javascript :;"

— TheOddCoder

Saya menggunakan jQuery versi 1.10.2, dan saya tidak mendapatkan kesalahan sintaks yang dialami @TheOddCoder.

— Mike Finch

1

Gunakan kode berikut untuk menampilkan menu alih-alih pergi ke alamat 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>

Luaskan cuplikan

— Kamil Kiełczewski
sumber