Apa yang dilakukan ekspresi href <a href="javascript:;"> </a>?

228

Saya telah melihat href berikut digunakan di halaman web dari waktu ke waktu. Namun, saya tidak mengerti apa yang coba dilakukan atau tekniknya. Bisakah seseorang menjelaskannya?

<a href="javascript:;"></a>
John Livermore
sumber
2
Anda dapat memanggil metode JS dengan ini jika saya tidak salah .. javascript: SomeFunction ()
Rob
1
Ini tidak mencoba melakukan apa pun yang tidak dapat ditangani dengan lebih baik dengan penangan klik yang tepat. Anda harus menghindari ini karena itu jelek, tidak dapat diakses dan telah menyebabkan orang menggunakan javascript:skema di mana seharusnya tidak digunakan ( onclick="javascript:…")
Gareth
2
Lihat ini: stackoverflow.com/a/138233/908879
ajax333221

Jawaban:

247

Sebuah <a>elemen HTML tidak valid kecuali memiliki baik sebagai hrefatau nameatribut.

Jika Anda ingin membuatnya dengan benar sebagai tautan (yaitu digarisbawahi, penunjuk tangan, dll), maka itu hanya akan dilakukan jika memiliki hrefatribut.

Karenanya kode seperti ini terkadang digunakan sebagai cara membuat tautan, tetapi tanpa harus memberikan URL aktual di hrefatribut. Pengembang jelas menginginkan tautan itu sendiri untuk tidak melakukan apa pun, dan ini adalah cara termudah yang dia tahu.

Dia mungkin memiliki beberapa kode peristiwa javascript di tempat lain yang dipicu ketika tautan diklik, dan itulah yang dia inginkan sebenarnya terjadi, tetapi dia ingin itu terlihat seperti <a>tautan tag normal .

Beberapa pengembang menggunakan href='#'untuk tujuan yang sama, tetapi ini menyebabkan browser untuk melompat ke bagian atas halaman, yang mungkin tidak diinginkan. Dan dia tidak bisa begitu saja meninggalkan href kosong, karena href=''merupakan tautan kembali ke halaman saat ini (yaitu menyebabkan refresh halaman).

Ada beberapa cara untuk mengatasi hal-hal ini. Menggunakan sedikit kode Javascript kosong di hrefsalah satunya, dan meskipun itu bukan solusi terbaik, itu berhasil.

Spudley
sumber
16
Karena penasaran, apakah ada cara yang lebih baik untuk melakukan ini?
Rahman Kalfane
28
lebih baik adalah melakukan hal ini adalah jika fungsi acara tidak return false;atau event.preventDefault()maka hreftindakan akan pernah disebut, sehingga Anda dapat menempatkan sesuatu yang lebih masuk akal di sana.
Spudley
6
Sebuah <a>tanpa hrefatau nametidak valid; ini dapat dengan mudah diperiksa menggunakan validator.
Jukka K. Korpela
2
Fragmen (# bagian) seharusnya tidak pernah dikirim ke server web sesuai dengan spesifikasi, jadi kemungkinan browser Anda melakukan sesuatu yang salah di sana.
Joshua Walsh
2
Ya untuk apa yang dikatakan @YoshieMaster. Jika URL memiliki # fragmen , itu tidak pernah dikirim ke server web (atau, oleh karena itu, ke firewall); itu hanya digunakan secara internal oleh browser. Dalam hal ini, mengklik tautan yang ditandai dengan <a href="#">... </a>tidak akan menyebabkan browser Anda mengirim permintaan HTTP apa pun ke mana pun; yang perlu dilakukan hanyalah menggulir ke bagian atas halaman.
Mark Reed
38

pada dasarnya alih-alih menggunakan tautan untuk memindahkan halaman (atau jangkar), menggunakan metode ini meluncurkan fungsi javascript

<script>
function doSomething() {
  alert("hello")
}
</script>
<a href="javascript:doSomething();">click me</a>

mengklik tautan itu akan menyalakan peringatan.

Eonasdan
sumber
31

Ada beberapa mekanisme untuk menghindari tautan untuk mencapai tujuannya. Yang dari pertanyaan itu tidak banyak intuisi.

Sebuah pilihan yang bersih adalah untuk digunakan href="#no"di mana #noadalah jangkar non-didefinisikan dalam dokumen.

Anda dapat menggunakan nama yang lebih semantik seperti #disable, atau #action untuk meningkatkan keterbacaan.

Manfaat dari pendekatan:

  • Menghindari efek "pindah ke atas" dari href kosong = "#"
  • Menghindari penggunaan javascript

Kekurangan:

  • Anda harus yakin bahwa nama jangkar tidak digunakan dalam dokumen.

Karena <a>elemen tidak bertindak sebagai tautan, opsi terbaik dalam kasus ini adalah tidak menggunakan <a>elemen tetapi a <div>dan memberikan gaya seperti tautan yang diinginkan.

Pau Giner
sumber
13
Saya suka jangkar yang tidak didefinisikan juga. Namun, kelemahan lainnya adalah ia menambahkan jangkar ke riwayat browser Anda, jadi saya memilih untuk menggunakan metode JS kosong di OP.
John Reid
10
<a href="javascript:alert('Hello');"></a>

hanya singkatan untuk:

<a href="" onclick="alert('Hello'); return false;"></a>
bjornd
sumber
3
Agak tapi itu bukan perbandingan "suka untuk" yang benar. Itulah alasan mengapa beberapa orang jatuh ke dalam perangkap menggunakannya di tempat pertama.
Lankymart
9

Ini adalah cara membuat tautan yang tidak melakukan apa-apa saat diklik (kecuali peristiwa Javascript terikat padanya).

Ini adalah cara menjalankan Javascript daripada mengikuti tautan:

<a href="Javascript: doStuff();">link</a>

Ketika sebenarnya tidak ada javascript untuk dijalankan (seperti contoh Anda) itu tidak melakukan apa-apa.

Daan Wilmer
sumber
Ah, begitu. Ini secara efektif menonaktifkan tautan.
John Livermore
9

Lihat ini:

<a href="Http://WWW.stackoverflow.com">Link to the website opened in different tab</a>
<a href="#MyDive">Link to the div in the page(look at the chaneged url)</a>
<a href="javascript:;">Nothing happens if there is no javaScript to render</a>
bk
sumber
4
<a href="javascript:void(0);"></a>

javascript: memberitahu browser akan menulis kode javascript

Gowri
sumber
3

Utas lama tetapi saya pikir saya hanya akan menambahkan bahwa alasan pengembang menggunakan konstruk ini bukan untuk membuat tautan mati, tetapi karena URL javascript karena alasan tertentu tidak meneruskan referensi ke elemen html aktif dengan benar.

misalnya handler_function(this.id)berfungsi sebagai onClicktetapi tidak sebagai URL javascript.

Jadi itu adalah pilihan antara menulis kode sesuai standar pedantik yang melibatkan Anda karena harus menyesuaikan panggilan secara manual untuk setiap hyperlink, atau sedikit kode non-standar yang dapat ditulis satu kali dan digunakan di mana-mana.


sumber
2

Jadi itu digunakan untuk menulis kode js di dalam hrefdaripada acara pendengar suka onclickdan menghindari #tautan hrefuntuk membuat atag valid untuk html.

Aku punya penelitian tentang bagaimana menggunakan javascript:dalam hrefatribut.

<a href="
     javascript:
        a = 4;
        console.log(a++); 
        a += 2; 
        console.log(a++); 
        if(a < 6){ 
            console.log('a is lower than 6');
        } 
        else 
            console.log('a is greater than 6');
        function log(s){
            console.log(s);
        }
        log('function inplimentation working too');

">Click here</a>

Melalui kode ini, Anda bahkan dapat menulis kode js di sana alih-alih hanya memanggil fungsi.


Diuji dalam Versi chrome 68.0.3440.106 (Bangun Resmi) (64-bit)

Diuji dalam Firefox Quantom 61.0.1 (64-bit)

Amir Fo
sumber
-4

Cara terbaik untuk selalu membuat tautan dengan benar adalah dengan css sebagai berikut:

a {cursor: pointer !important}

Orang harus menghindari untuk mengikuti hal-hal yang tidak perlu seperti yang disebutkan di utas.

Imran Nazir
sumber