Nilai "href" manakah yang harus saya gunakan untuk tautan JavaScript, "#" atau "javascript: void (0)"?

4076

Berikut ini adalah dua metode membangun tautan yang memiliki tujuan tunggal menjalankan kode JavaScript. Mana yang lebih baik, dalam hal fungsionalitas, kecepatan memuat halaman, keperluan validasi, dll.?

function myJsFunc() {
    alert("myJsFunc");
}
<a href="#" onclick="myJsFunc();">Run JavaScript Code</a>

atau

function myJsFunc() {
    alert("myJsFunc");
}
 <a href="javascript:void(0)" onclick="myJsFunc();">Run JavaScript Code</a>

Peter Mortensen
sumber
202
Kecuali saya kehilangan sesuatu, <a href="javascript:void(0)" onclick="myJsFunc();">sama sekali tidak masuk akal. Jika Anda harus menggunakan javascript:protokol-psuedo, Anda tidak perlu onclickatributnya juga. <a href="javascript:myJsFunc();">akan baik-baik saja.
Wesley Murch
65
@WesleyMurch - Jika myJsFunc()memiliki nilai balik, halaman Anda akan rusak. jsfiddle.net/jAd9G Sebaiknya kau masih harus menggunakan voidseperti: <a href="javascript:void myJsFunc();">. Namun kemudian, perilakunya masih akan berbeda. Meminta tautan melalui menu konteks tidak memicu clickacara.
gilly3
38
Kenapa tidak adil <a href="javascript:;" onclick="myEvent()"?
3k-
26
javascript:;jauh lebih cepat untuk mengetik daripadajavascript:void(0)
Mike Causer
78
Pikiran pertama ketika melihat ini: "mengapa Anda menggunakan <a>tag jika apa yang ingin Anda lakukan BUKAN membuka halaman lain melalui fitur browser asli tetapi memiliki beberapa 'tindakan' javascript untuk dipicu? Cukup menggunakan spantag dengan kelas js-triggermungkin akan jauh lebih baik ". Atau apakah saya melewatkan sesuatu?
Adrien Be

Jawaban:

2164

Saya menggunakan javascript:void(0).

Tiga alasan. Mendorong penggunaan di #antara tim pengembang mau tidak mau mengarah ke beberapa menggunakan nilai kembali fungsi yang disebut seperti ini:

function doSomething() {
    //Some code
    return false;
}

Tetapi kemudian mereka lupa untuk menggunakan return doSomething()onclick dan hanya menggunakan doSomething().

Alasan kedua untuk menghindari #adalah bahwa final return false;tidak akan mengeksekusi jika fungsi yang dipanggil melempar kesalahan. Oleh karena itu pengembang juga harus ingat untuk menangani kesalahan dengan tepat pada fungsi yang dipanggil.

Alasan ketiga adalah bahwa ada kasus di mana onclickproperti acara ditetapkan secara dinamis. Saya lebih suka untuk dapat memanggil fungsi atau menugaskannya secara dinamis tanpa harus kode fungsi khusus untuk satu metode lampiran atau yang lain. Karenanya saya onclick(atau apa pun) di markup HTML terlihat seperti ini:

onclick="someFunc.call(this)"

ATAU

onclick="someFunc.apply(this, arguments)"

Menggunakan javascript:void(0)menghindari semua sakit kepala di atas, dan saya belum menemukan contoh kelemahan.

Jadi jika Anda seorang pengembang tunggal maka Anda dapat dengan jelas membuat pilihan sendiri, tetapi jika Anda bekerja sebagai tim, Anda harus menyatakan:

Gunakan href="#", pastikan onclickselalu mengandung return false;di akhir, bahwa setiap fungsi yang dipanggil tidak menimbulkan kesalahan dan jika Anda melampirkan fungsi secara dinamis ke onclickproperti pastikan bahwa dan tidak membuang kesalahan itu kembali false.

ATAU

Menggunakan href="javascript:void(0)"

Yang kedua jelas jauh lebih mudah untuk berkomunikasi.

AnthonyWJones
sumber
329
Saya selalu membuka setiap tautan di tab baru dan ini adalah alasan mengapa saya secara pribadi membencinya ketika orang menggunakan href="javascript:void(0)"metode ini
Timo Huovinen
182
Maaf tidak setuju mengapa jawaban ini memiliki begitu banyak pembaruan? Penggunaan javascript:apa pun harus dianggap praktik yang buruk, menonjol dan tidak anggun.
Lankymart
52
Dua jawaban berikutnya jauh lebih baik dan masuk akal daripada yang ini. Juga dua argumen pertama tidak valid karena event.preventDefault()ada tepat untuk mencegah perilaku default (seperti melompat ke bagian atas halaman dalam kasus ini) dan melakukan pekerjaan yang lebih baik tanpa semua return false;kegilaan.
sudee
136
Maju cepat ke 2013: javascript:void(0)melanggar Kebijakan Keamanan Konten pada halaman HTTPS yang mendukung CSP. Salah satu opsi akan digunakan href='#'dan event.preventDefault()di handler, tapi saya tidak suka ini. Mungkin Anda dapat membuat konvensi untuk digunakan href='#void'dan memastikan tidak ada elemen pada halaman tersebut id="void". Dengan begitu, mengklik tautan ke jangkar yang tidak ada tidak akan menggulir halaman.
jakub.g
24
Anda dapat menggunakan "#" dan kemudian mengikat acara klik ke semua tautan dengan "#" sebagai href. Ini akan dilakukan di jQuery dengan:$('a[href="#"]').click(function(e) { e.preventDefault ? e.preventDefault() : e.returnValue = false; });
Nathan
1325

Tidak juga.

Jika Anda dapat memiliki URL aktual yang masuk akal gunakan itu sebagai HREF. Onclick tidak akan aktif jika seseorang mengeklik tengah tautan Anda untuk membuka tab baru atau jika JavaScript dinonaktifkan.

Jika itu tidak memungkinkan, maka Anda setidaknya harus menyuntikkan tag jangkar ke dalam dokumen dengan JavaScript dan penangan peristiwa klik yang sesuai.

Saya menyadari ini tidak selalu mungkin, tetapi menurut saya harus diupayakan untuk mengembangkan situs web publik apa pun.

Lihat JavaScript yang Tidak Mengganggu dan peningkatan Progresif (keduanya Wikipedia).

Aaron Wagner
sumber
19
Bisakah Anda memberikan contoh bagaimana seseorang "menyuntikkan tag jangkar ke dalam dokumen dengan JavaScript dan penangan peristiwa klik yang sesuai"?
user456584
11
Mengapa menyuntikkan tag jangkar sama sekali jika itu hanya dimaksudkan untuk digunakan untuk memungkinkan elemen menjadi a) diklik b) menampilkan kursor "pointer". Tampaknya tidak relevan untuk bahkan menyuntikkan jangkar tag dalam skenario ini.
naksir
12
+1 untuk keduanya, tetapi ada pendekatan yang berlebihan. Fakta tetap menggunakan salah satu javascript:atau #keduanya praktik buruk dan tidak dianjurkan. Artikel bagus btw.
Lankymart
13
@ Crush: Saya juga tidak akan menggunakan div atau span; terus terang, ini sepertinya <button>memang dibuat untuk itu. Tetapi setuju: itu mungkin tidak boleh secara khusus <a>jika tidak ada tempat yang cocok untuk terhubung.
cHao
14
@cHao Button mungkin adalah pilihan terbaik. Saya kira poin utamanya adalah bahwa elemen HTML tidak boleh dipilih berdasarkan tampilan presentasi standarnya, tetapi lebih penting bagi struktur dokumen.
naksir
775

Melakukan <a href="#" onclick="myJsFunc();">Link</a>atau <a href="javascript:void(0)" onclick="myJsFunc();">Link</a>atau apa pun yang mengandung onclickatribut - baik-baik saja kembali lima tahun yang lalu, meskipun sekarang bisa menjadi praktik yang buruk. Inilah alasannya:

  1. Ini mempromosikan praktik JavaScript yang mencolok - yang ternyata sulit dipertahankan dan sulit untuk ditingkatkan. Lebih lanjut tentang ini di JavaScript tidak mengganggu .

  2. Anda menghabiskan waktu Anda menulis kode yang sangat terlalu banyak - yang memiliki sedikit manfaat (jika ada) untuk basis kode Anda.

  3. Sekarang ada cara yang lebih baik, lebih mudah, dan lebih dapat dipertahankan dan terukur untuk mencapai hasil yang diinginkan.

Cara JavaScript yang tidak mencolok

Hanya saja, tidak memiliki hrefatribut sama sekali! Reset CSS yang baik akan mengatasi gaya kursor default yang hilang, sehingga itu bukan masalah. Kemudian lampirkan fungsionalitas JavaScript Anda menggunakan praktik terbaik yang anggun dan tidak mencolok - yang lebih dapat dipertahankan karena logika JavaScript Anda tetap dalam JavaScript, daripada di markup Anda - yang penting ketika Anda mulai mengembangkan aplikasi JavaScript skala besar yang mengharuskan logika Anda untuk dipecah menjadi komponen dan templat kotak hitam. Lebih lanjut tentang ini dalam Arsitektur Aplikasi JavaScript skala besar

Contoh kode sederhana

// Cancel click event
$('.cancel-action').click(function(){
    alert('Cancel action occurs!');
});

// Hover shim for Internet Explorer 6 and Internet Explorer 7.
$(document.body).on('hover','a',function(){
    $(this).toggleClass('hover');
});
a { cursor: pointer; color: blue; }
a:hover,a.hover { text-decoration: underline; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="cancel-action">Cancel this action</a>

Sebuah blackboxed Backbone.js contoh

Untuk contoh komponen scalable, blackboxed, Backbone.js - lihat contoh jsfiddle ini di sini . Perhatikan bagaimana kami menggunakan praktik JavaScript yang tidak mencolok, dan dalam jumlah kecil kode memiliki komponen yang dapat diulangi beberapa kali di halaman tanpa efek samping atau konflik antara berbagai komponen yang berbeda. Luar biasa!

Catatan

  • Menghilangkan hrefatribut pada aelemen akan menyebabkan elemen tidak dapat diakses menggunakan tabnavigasi tombol. Jika Anda ingin agar elemen-elemen itu dapat diakses melalui tabkunci, Anda dapat mengatur tabindexatribut, atau menggunakan buttonelemen sebagai gantinya. Anda dapat dengan mudah menata elemen tombol agar terlihat seperti tautan normal seperti yang disebutkan dalam jawaban Tracker1 .

  • Menghilangkan hrefatribut pada aelemen akan menyebabkan Internet Explorer 6 dan Internet Explorer 7 tidak mengambil a:hovergaya, itulah sebabnya kami telah menambahkan shim JavaScript sederhana untuk mencapai ini via a.hovergantinya. Yang benar-benar oke, seolah-olah Anda tidak memiliki atribut href dan tidak ada degradasi yang anggun maka tautan Anda tidak akan berhasil - dan Anda akan memiliki masalah yang lebih besar untuk dikhawatirkan.

  • Jika Anda ingin tindakan Anda tetap berfungsi dengan JavaScript dinonaktifkan, maka gunakan aelemen dengan hrefatribut yang mengarah ke beberapa URL yang akan melakukan tindakan secara manual alih-alih melalui permintaan Ajax atau apa pun yang harus menjadi cara untuk pergi. Jika Anda melakukan ini, maka Anda ingin memastikan Anda melakukan event.preventDefault()panggilan klik untuk memastikan ketika tombol diklik tidak mengikuti tautan. Opsi ini disebut degradasi yang anggun.

balupton
sumber
163
Hati-hati, meninggalkan atribut href tidak kompatibel lintas browser dan Anda akan kehilangan hal-hal seperti efek hover di internet explorer
Thomas Davis
16
Hati-hati: buttonpendekatan bergaya tautan yang disarankan di sini terganggu oleh keadaan aktif "3d" yang tidak dapat dihindari di IE9 dan lebih rendah .
Brennan Roberts
44
Saya menemukan jawaban ini terlalu dogmatis. Ada kalanya Anda hanya ingin menerapkan perilaku JS ke 1 atau 2 a href. Dalam hal ini, itu berlebihan untuk mendefinisikan CSS tambahan dan menyuntikkan seluruh fungsi JS. Dalam beberapa kasus (misalnya menambahkan konten melalui CMS) Anda sebenarnya tidak diizinkan untuk menyuntikkan CSS baru atau JS mandiri, dan hanya sebaris yang dapat Anda lakukan. Saya tidak melihat bagaimana solusi inline kurang dapat dipertahankan dalam praktiknya untuk 1 atau 2 JS a href sederhana. Selalu curiga terhadap pernyataan umum yang luas tentang praktik buruk, termasuk yang ini :)
Jordan Rieger
17
Dengan semua "catatan" yang sulit diselesaikan (pengaturan tabindex meminta masalah pada halaman yang kompleks!). Jauh lebih baik untuk dilakukan javascript:void(0). Itu adalah jawaban pragmatis, dan satu-satunya jawaban yang masuk akal di dunia nyata.
Abhi Beckert
14
Jika Anda peduli untuk membuat aplikasi web Anda dapat diakses (dan Anda harus), kesederhanaan dan kewarasan berpendapat untuk href. Kegilaan terletak pada arah tabindex.
jkade
328

'#'akan membawa pengguna kembali ke bagian atas halaman, jadi saya biasanya memilih void(0).

javascript:; juga berperilaku seperti javascript:void(0);

Gabe Rogan
sumber
68
Cara untuk menghindarinya adalah dengan mengembalikan false di event handler onclick.
Guvante
34
Mengembalikan nilai false di event handler tidak menghindari hal itu jika JavaScript JS tidak berhasil dijalankan.
Quentin
28
menggunakan "#someNonExistantAnchorName" berfungsi dengan baik karena tidak memiliki tempat untuk melompat.
scunliffe
21
Jika Anda memiliki basis href, maka #atau #somethingakan membawa Anda ke jangkar pada halaman dasar href , bukan pada halaman saat ini.
Abhi Beckert
11
Shebang ( #!) melakukan trik tetapi ini jelas merupakan praktik yang buruk.
Neel
276

Sejujurnya saya tidak menyarankan. Saya akan menggunakan gaya <button></button>untuk perilaku itu.

button.link {
  display: inline-block;
  position: relative;
  background-color: transparent;
  cursor: pointer;
  border: 0;
  padding: 0;
  color: #00f;
  text-decoration: underline;
  font: inherit;
}
<p>A button that looks like a <button type="button" class="link">link</button>.</p>

Dengan cara ini Anda dapat menetapkan onclick Anda. Saya juga menyarankan mengikat melalui skrip, tidak menggunakan onclickatribut pada tag elemen. Satu-satunya gotcha adalah efek teks psuedo 3d di IE yang lebih lama yang tidak dapat dinonaktifkan.


Jika Anda HARUS menggunakan elemen A, gunakan javascript:void(0);untuk alasan yang telah disebutkan.

  • Akan selalu mencegat jika acara onclick Anda gagal.
  • Tidak akan ada panggilan beban yang salah terjadi, atau memicu acara lain berdasarkan perubahan hash
  • Tag hash dapat menyebabkan perilaku yang tidak terduga jika klik gagal (onclick throws), hindari kecuali itu adalah perilaku fall-through yang sesuai, dan Anda ingin mengubah riwayat navigasi.

CATATAN: Anda dapat mengganti 0dengan string seperti javascript:void('Delete record 123')yang dapat berfungsi sebagai indikator tambahan yang akan menunjukkan apa yang sebenarnya akan dilakukan oleh klik.

Pelacak1
sumber
Di IE8 / IE9, saya tidak dapat menghapus offset 1px "3D" di tombol: status aktif.
Brennan Roberts
@BrennanRoberts Ya, sayangnya, setiap penataan tombol lebih bermasalah dengan IE ... Saya masih merasa itu mungkin pendekatan yang paling tepat, bukan karena saya tidak melanggar peraturan saya sendiri pada kesempatan tertentu.
Pelacak1
Maka jangan gunakan <button>tetapi sebagai input type=buttongantinya?
Patrik Affentranger
4
Kemudian gunakan <clickable>elemen. Atau <clickabletim>jika Anda suka. Sayangnya, menggunakan tag non-standar atau div biasa mungkin menyulitkan pengguna keyboard untuk memfokuskan elemen.
joeytwiddle
28
Jawaban ini harus di bagian atas. Jika Anda mengalami dilema ini, kemungkinan Anda sebenarnya membutuhkan button. Dan IE9 dengan cepat kehilangan pangsa pasar, untungnya, dan efek aktif 1px seharusnya tidak mencegah kita untuk menggunakan markup semantik. <a>adalah tautan, artinya mengirim Anda ke suatu tempat, untuk tindakan yang kami lakukan <button>.
mjsarfatti
141

Yang pertama, idealnya dengan tautan nyata untuk diikuti jika pengguna menonaktifkan JavaScript. Pastikan untuk mengembalikan false untuk mencegah peristiwa klik dari penembakan jika JavaScript dijalankan.

<a href="#" onclick="myJsFunc(); return false;">Link</a>

Jika Anda menggunakan Angular2, cara ini berfungsi:

<a [routerLink]="" (click)="passTheSalt()">Click me</a>.

Lihat di sini https://stackoverflow.com/a/45465728/2803344

Belter
sumber
19
Jadi di agen pengguna dengan JavaScript diaktifkan dan fungsi yang didukung ini menjalankan fungsi JavaScript, mundur (untuk agen pengguna di mana JS gagal karena alasan apa pun) ke tautan ke bagian atas halaman? Ini jarang merupakan fallback yang masuk akal.
Quentin
21
"idealnya dengan tautan nyata untuk diikuti seandainya pengguna menonaktifkan JavaScript", seharusnya menuju ke halaman yang bermanfaat bukan #, bahkan jika itu hanya penjelasan bahwa situs tersebut membutuhkan JS agar berfungsi. Adapun gagal, saya akan mengharapkan pengembang untuk menggunakan deteksi fitur browser yang tepat, dll sebelum digunakan.
Zach
Saya akan berasumsi (berharap) bahwa sesuatu seperti ini hanya untuk menunjukkan sembulan atau sesuatu yang serupa sederhana. Dalam hal ini, defaultnya adalah url halaman popup. Jika ini adalah bagian dari aplikasi web, atau memiliki JS dinonaktifkan akan benar-benar istirahat halaman, maka kode ini memiliki masalah lain ...
Brian Moeskau
5
Aplikasi web saya dirancang untuk terdegradasi dengan anggun, sehingga tautannya akan tetap menjadi halaman yang bermanfaat. Kecuali jika aplikasi web Anda adalah klien obrolan atau sesuatu yang interaktif, ini akan berfungsi jika Anda meluangkan waktu untuk merancang dengan mempertimbangkan degradasi.
Zach
2
Masalahnya adalah jika myJsFunc melempar kesalahan, itu tidak akan ditangkap untuk kembali salah.
Tracker1
106

Baik jika Anda bertanya kepada saya;

Jika "tautan" Anda memiliki tujuan tunggal menjalankan beberapa kode JavaScript, itu tidak memenuhi syarat sebagai tautan; bukan sepotong teks dengan fungsi JavaScript yang digabungkan dengannya. Saya akan merekomendasikan untuk menggunakan <span>tag dengan onclick handlerlampiran dan beberapa CSS dasar untuk meniru tautan. Tautan dibuat untuk navigasi, dan jika kode JavaScript Anda bukan untuk navigasi, itu tidak boleh berupa <a>tag.

Contoh:

function callFunction() { console.log("function called"); }
.jsAction {
    cursor: pointer;
    color: #00f;
    text-decoration: underline;
}
<p>I want to call a JavaScript function <span class="jsAction" onclick="callFunction();">here</span>.</p>

fijter
sumber
126
Pendekatan ini membatasi 'tautan' ke operasi khusus mouse. Jangkar dapat dikunjungi melalui keyboard dan acara 'onclick' -nya dipecat ketika tombol enter ditekan.
AnthonyWJones
40
Warna-warna hardcoding di CSS Anda akan mencegah browser dari menggunakan warna-warna kustom yang mungkin didefinisikan pengguna, yang bisa menjadi masalah dengan aksesibilitas.
Hosam Aly
30
<span>Ini tidak dimaksudkan untuk melakukan apa pun. <A>Nchors dan <buttons>digunakan untuk itu!
redShadow
22
Menggunakan buttonsadalah pilihan yang lebih baik di sini sementara menggunakan spantidak.
Permisi
1
Saya pikir rentang lebih baik daripada tag jangkar. Tag jangkar ada untuk mengarahkan Anda ke atribut href wajibnya. Jika Anda tidak akan menggunakan href, jangan gunakan jangkar. Itu tidak membatasi tautan ke mouse hanya karena itu bukan tautan. Itu tidak memiliki href. Ini lebih seperti sebuah tombol tetapi tidak memposting. Rentang yang tidak dimaksudkan untuk melakukan apa pun sama sekali tidak valid. Pertimbangkan menu tarik-turun yang diaktifkan saat Anda mengarahkan kursor. Mungkin kombinasi bentang dan div, menjalankan fungsi tombol yang memperluas area pada layar.
NibblyPig
97

Idealnya Anda akan melakukan ini:

<a href="javascriptlessDestination.html" onclick="myJSFunc(); return false;">Link text</a>

Atau, lebih baik lagi, Anda akan memiliki tautan tindakan default di HTML, dan Anda akan menambahkan acara onclick ke elemen secara tidak mencolok melalui JavaScript setelah DOM dirender, sehingga memastikan bahwa jika JavaScript tidak ada / digunakan, Anda tidak memiliki penangan acara yang tidak berguna mengacaukan kode Anda dan berpotensi mengaburkan (atau setidaknya mengganggu) konten Anda yang sebenarnya.

Steve Paulo
sumber
76

Menggunakan hanya #membuat beberapa gerakan lucu, jadi saya akan merekomendasikan untuk digunakan #selfjika Anda ingin menghemat upaya mengetik JavaScript bla, bla,.

Spammer Joe
sumber
7
WOW, acungan jempol untuk tip ini. Tidak pernah tahu bahwa Anda dapat menggunakan #selftag yang diberi nama, dan menghindari perilaku browser yang menyebalkan untuk melompat ke atas halaman. Terima kasih.
alonso.torres
34
Untuk referensi, #selfsepertinya tidak istimewa. Setiap pengidentifikasi fragmen yang tidak cocok dengan nama atau id elemen apa pun dalam dokumen (dan tidak kosong atau "atas") harus memiliki efek yang sama.
cHao
1
Saya biasanya hanya menggunakan nama jangkar yang dibuat-buat, tetapi saya pikir saya akan mulai melakukan ini agar konsisten di seluruh pekerjaan saya.
Douglas.Sesar
11
Saya menyarankan untuk membuat #voidkonvensi di komentar lain tetapi sebenarnya #selfsingkat dan mudah dihafal. Apa pun lebih baik daripada#
jakub.g
6
Tetapi jika Anda mengklik tautan itu akan aneh bagi pengguna untuk melihat "#void" di url, terlihat seperti kesalahan dan bug, sama dengan #self atau apa pun.
pmiranda
68

Saya menggunakan yang berikut ini

<a href="javascript:;" onclick="myJsFunc();">Link</a>

sebagai gantinya

<a href="javascript:void(0);" onclick="myJsFunc();">Link</a>
se_pavel
sumber
2
Saya menggunakan javascript:(tidak ada semi-kolon) karena terlihat paling rapi di status bar di hover.
Boann
4
Kode ini dapat menyebabkan kejutan buruk di IE yang lebih lama. Pada titik tertentu ia digunakan untuk memecah segala efek animasi dengan gambar, termasuk rollover dan bahkan animasi gif: groups.google.com/forum/#!topic/comp.lang.javascript/…
Ilya Streltsyn
Anda selalu dapat melakukan ... javascript:void('Do foo')karena void akan kembali tidak terdefinisi terlepas, itu akan memberikan indikator kepada pengguna apa yang diklik akan dilakukan. Di mana Do foobisa Delete record Xatau apa pun yang Anda suka.
Tracker1
53

Saya setuju dengan saran di tempat lain yang menyatakan bahwa Anda harus menggunakan URL biasa dalam hrefatribut, lalu memanggil beberapa fungsi JavaScript di onclick. Kekurangannya adalah, mereka secara otomatis menambahkan return falsesetelah panggilan.

Masalah dengan pendekatan ini adalah, bahwa jika fungsi tidak akan berfungsi atau jika akan ada masalah, tautan akan menjadi tidak dapat diklik. Acara onclick akan selalu kembali false, sehingga URL normal tidak akan dipanggil.

Ada solusi yang sangat sederhana. Biarkan fungsi kembali truejika berfungsi dengan benar. Kemudian gunakan nilai yang dikembalikan untuk menentukan apakah klik harus dibatalkan atau tidak:

JavaScript

function doSomething() {
    alert( 'you clicked on the link' );
    return true;
}

HTML

<a href="path/to/some/url" onclick="return !doSomething();">link text</a>

Perhatikan, bahwa saya meniadakan hasil doSomething()fungsi. Jika berhasil, ia akan kembali true, sehingga akan dinegasikan ( false) dan path/to/some/URLtidak akan dipanggil. Jika fungsi akan kembali false(misalnya, browser tidak mendukung sesuatu yang digunakan dalam fungsi atau ada yang salah), itu dinegasikan ke truedan path/to/some/URLdisebut.

Fczbkk
sumber
50

#lebih baik daripada javascript:anything, tetapi berikut ini bahkan lebih baik:

HTML:

<a href="/gracefully/degrading/url/with/same/functionality.ext" class="some-selector">For great justice</a>

JavaScript:

$(function() {
    $(".some-selector").click(myJsFunc);
});

Anda harus selalu berusaha untuk degradasi yang anggun (dalam hal pengguna tidak mengaktifkan JavaScript ... dan ketika itu dengan spesifikasi. Dan anggaran). Selain itu, dianggap sebagai bentuk buruk untuk menggunakan atribut JavaScript dan protokol langsung dalam HTML.

Justin Johnson
sumber
1
@ Muhd: Kembali harus diaktifkan clickpada tautan ...
Ry-
50

Saya sarankan menggunakan <button>elemen sebagai gantinya, terutama jika kontrol seharusnya menghasilkan perubahan dalam data. (Sesuatu seperti POST.)

Bahkan lebih baik jika Anda menyuntikkan elemen secara tidak mencolok, jenis peningkatan progresif. (Lihat komentar ini .)

perlakukan mod Anda dengan baik
sumber
2
Saya juga berpikir ini adalah solusi terbaik. Jika Anda memiliki elemen yang dimaksudkan untuk melakukan suatu tindakan, tidak ada alasan untuk itu menjadi tautan.
mateuscb
Jika Anda bertanya dan href Anda akan terlihat seperti "#sesuatu" beberapa jawaban lain yang terdaftar mungkin berfungsi, tetapi: Tanpa href yang terhubung dengan sesuatu yang masuk akal, tidak ada gunanya memiliki href, atau bahkan tautan sama sekali. Penggunaan tombol yang disarankan mungkin dilakukan, atau menggunakan elemen lain apa pun kecuali tautan yang tidak menerima tautan apa pun.
kontur
1
Keunggulan lain dari ini adalah Bootstrap .btnmembuat tombol dan tautan terlihat persis sama.
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
Dari perspektif pengguna, button juga tidak memasukkan # ke dalam URL atau menunjukkan ahref sebagai javascript:;
Coll
39

Kecuali Anda menulis tautan menggunakan JavaScript (sehingga Anda tahu itu diaktifkan di browser), idealnya Anda harus menyediakan tautan yang tepat untuk orang-orang yang browsing dengan JavaScript dinonaktifkan dan kemudian mencegah tindakan default tautan di onclick Anda. pengendali acara. Dengan cara ini mereka yang mengaktifkan JavaScript akan menjalankan fungsi dan mereka yang dinonaktifkan JavaScript akan melompat ke halaman yang sesuai (atau lokasi dalam halaman yang sama) daripada hanya mengklik tautan dan tidak terjadi apa-apa.

Simon Forrest
sumber
36

Jelas hash ( #) lebih baik karena dalam JavaScript itu adalah pseudoscheme:

  1. mencemari sejarah
  2. instantiate salinan mesin baru
  3. berjalan dalam lingkup global dan tidak menghormati sistem acara.

Tentu saja "#" dengan handler onclick yang mencegah aksi default adalah [jauh] lebih baik. Selain itu, tautan yang memiliki tujuan tunggal untuk menjalankan JavaScript tidak benar-benar "tautan" kecuali jika Anda mengirim pengguna ke beberapa jangkar yang masuk akal pada halaman (hanya # akan mengirim ke atas) ketika terjadi kesalahan. Anda cukup mensimulasikan tampilan dan nuansa tautan dengan stylesheet dan lupakan href sama sekali.

Selain itu, mengenai saran cowgod, khususnya ini: ...href="javascript_required.html" onclick="...Ini adalah pendekatan yang baik, tetapi tidak membedakan antara skenario "JavaScript dinonaktifkan" dan "onclick gagal".

Konsultasi Gratis
sumber
1
@ Birker Yüceer, mengapa CW?
Konsultasi Gratis
30

Saya biasanya pergi untuk

<a href="javascript:;" onclick="yourFunction()">Link description</a>

Ini lebih pendek dari javascript: void (0) dan melakukan hal yang sama.

Dnetix
sumber
27

Saya akan menggunakan:

<a href="#" onclick="myJsFunc();return false;">Link</a>

Alasan:

  1. Ini membuat hrefsederhana, mesin pencari membutuhkannya. Jika Anda menggunakan hal lain (seperti string), ini dapat menyebabkan 404 not foundkesalahan.
  2. Ketika mouse melayang di atas tautan, itu tidak menunjukkan bahwa itu adalah skrip.
  3. Dengan menggunakan return false;, halaman tidak melompat ke atas atau merusak backtombol.
Eric Yin
sumber
saya tidak setuju dengan "1." karena itu memberikan kesalahan ketika Anda menempatkan tautan skrip Anda ketika skrip tidak diizinkan. sehingga tautan semacam itu harus ditambahkan dengan kode js. dengan cara itu orang dapat menghindari tautan-tautan itu sementara skrip tidak diizinkan dan tidak melihat kesalahan sama sekali.
Berker Yüceer
25

Saya memilih menggunakan javascript:void(0), karena menggunakan ini dapat mencegah klik kanan untuk membuka menu konten. Tetapi javascript:;lebih pendek dan melakukan hal yang sama.

pengguna564706
sumber
24

Jadi, ketika Anda melakukan beberapa hal JavaScript dengan <a />tag dan jika Anda meletakkannya href="#"juga, Anda dapat menambahkan return false di akhir acara (dalam hal pengikatan acara inline) seperti:

<a href="#" onclick="myJsFunc(); return false;">Run JavaScript Code</a>

Atau Anda dapat mengubah atribut href dengan JavaScript seperti:

<a href="javascript://" onclick="myJsFunc();">Run JavaScript Code</a>

atau

<a href="javascript:void(0)" onclick="myJsFunc();">Run JavaScript Code</a>

Tapi secara semantik, semua cara di atas untuk mencapai ini salah (itu berfungsi dengan baik) . Jika ada elemen yang tidak dibuat untuk menavigasi halaman dan yang memiliki beberapa hal JavaScript yang terkait dengannya, maka itu tidak boleh a<a> tag.

Anda cukup menggunakan a <button />untuk melakukan hal-hal atau elemen lain seperti b, span atau apa pun yang sesuai dengan kebutuhan Anda, karena Anda diizinkan untuk menambahkan acara pada semua elemen.


Jadi, ada satu manfaat yang bisa digunakan <a href="#">. Anda mendapatkan kursor kursor secara default pada elemen itu saat melakukannyaa href="#" . Untuk itu, saya pikir Anda dapat menggunakan CSS untuk seperti inicursor:pointer; yang memecahkan masalah ini juga.

Dan pada akhirnya, jika Anda mengikat acara dari kode JavaScript itu sendiri, di sana Anda dapat melakukannya event.preventDefault()untuk mencapai ini jika Anda menggunakan <a>tag, tetapi jika Anda tidak menggunakan<a> tag untuk ini, di sana Anda mendapatkan keuntungan, Anda tidak perlu tidak perlu melakukan ini.

Jadi, jika Anda lihat, lebih baik tidak menggunakan tag untuk hal-hal semacam ini.

Ashish Kumar
sumber
23

Jangan gunakan tautan hanya untuk menjalankan JavaScript.

Penggunaan href = "#" menggulir halaman ke atas; penggunaan void (0) menciptakan masalah navigasi di dalam browser.

Alih-alih, gunakan elemen selain tautan:

<span onclick="myJsFunc()" class="funcActuator">myJsFunc</span>

Dan tata dengan CSS:

.funcActuator { 
  cursor: default;
}

.funcActuator:hover { 
  color: #900;
}
Garrett
sumber
13
Gunakan tombol, bukan rentang. Tombol secara alami masuk dalam urutan fokus sehingga dapat diakses tanpa mouse / trackpad / dll.
Quentin
4
Menambahkan komentar ton Quentin: seperti yang ditulis saat ini, pengguna keyboard tidak akan mencapai spanelemen tersebut karena itu adalah elemen yang tidak dapat fokus. Itu sebabnya Anda butuh tombol.
Tsundoku
1
Anda dapat membuatnya fokus dengan menambahkan tabindex="0"rentang. Yang mengatakan, menggunakan tombol lebih baik karena memberi Anda fungsi yang diinginkan secara gratis. Untuk membuatnya dapat diakses menggunakan rentang Anda tidak hanya perlu melampirkan pengendali klik, tetapi pengendali acara keyboard yang mencari penekan spasi atau tombol enter lalu menembakkan penangan klik normal. Anda juga ingin mengubah pemilih CSS kedua .funcActuator:hover, .funcActuator:focusagar fakta bahwa elemen memiliki fokus jelas.
Kode Tidak Berguna
22

Akan lebih baik menggunakan jQuery,

$(document).ready(function() {
    $("a").css("cursor", "pointer");
});

dan hilangkan keduanya href="#"dan href="javascript:void(0)".

Markup tag jangkar akan seperti

<a onclick="hello()">Hello</a>

Cukup sederhana!

naveen
sumber
5
Inilah yang akan saya katakan. Jika tautan memiliki url mundur yang masuk akal, gunakan itu. Jika tidak, cukup hapus href atau gunakan sesuatu yang lebih semantik daripada <a>. Jika satu-satunya alasan semua orang mengadvokasi termasuk href adalah untuk mendapatkan jari pada hover, sederhana "a {cursor: pointer;}" akan melakukan trik.
Matt Kantor
12
Itu memberikan aksesibilitas yang mengerikan. Cobalah di SO: Anda tidak dapat menandai pos tanpa menggunakan mouse. Tautan "tautan" dan "sunting" dapat diakses dengan tab, tetapi "bendera" tidak.
Nicolás
6
Saya setuju dengan opsi ini. Jika jangkar tidak memiliki tujuan selain JavaScript, maka seharusnya tidak memiliki href. @Fatih: Menggunakan jQuery berarti bahwa jika JavaScript dinonaktifkan, tautan TIDAK akan memiliki pointer.
Scott Rippey
3
Jika Anda akan pergi rute ini, mengapa tidak mengikat klik menggunakan jQuery juga? Bagian dari hal hebat tentang menggunakan jQuery adalah kemampuan untuk memisahkan javascript Anda dari markup Anda.
Muhd
4
Saya tidak percaya jawaban ini memiliki 11 suara. Itu mengerikan. Mengapa Anda menambahkan gaya melalui Javascript (dan jQuery ??), dan kemudian mendefinisikan tindakan onclick Anda dalam HTML? Mengerikan.
MMM
20

Jika Anda menggunakan AngularJS , Anda dapat menggunakan yang berikut:

<a href="">Do some fancy JavaScript</a>

Yang tidak akan melakukan apa-apa.

Sebagai tambahan

  • Ini tidak akan membawa Anda ke bagian atas halaman, seperti (#)
    • Karenanya, Anda tidak perlu kembali secara eksplisit falsedengan JavaScript
  • Ini singkat
whirlwin
sumber
6
Tetapi ini akan menyebabkan halaman dimuat ulang, dan karena kami selalu menggunakan javascript untuk memodifikasi halaman, ini tidak dapat diterima.
Henry Hu
@HenryHu saya tahu bahwa alasan itu tidak memuat ulang adalah karena AngularJS. Lihat jawaban saya yang diperbarui.
whirlwin
19

Jika tidak ada, hrefmungkin tidak ada alasan untuk menggunakan tag anchor.

Anda dapat melampirkan acara (klik, arahkan, dll.) Pada hampir setiap elemen, jadi mengapa tidak menggunakan a spanatau a sajadiv ?

Dan untuk pengguna dengan JavaScript dinonaktifkan: jika tidak ada fallback (misalnya, alternatif href), mereka setidaknya harus tidak dapat melihat dan berinteraksi dengan elemen itu sama sekali, apa pun itu <a>atau <span>tag.

achairapart
sumber
19

Biasanya, Anda harus selalu memiliki tautan mundur untuk memastikan bahwa klien dengan JavaScript dinonaktifkan masih memiliki beberapa fungsi. Konsep ini disebut JavaScript tidak mencolok.

Contoh ... Katakanlah Anda memiliki tautan pencarian berikut:

<a href="search.php" id="searchLink">Search</a>

Anda selalu dapat melakukan hal berikut:

var link = document.getElementById('searchLink');

link.onclick = function() {
    try {
        // Do Stuff Here        
    } finally {
        return false;
    }
};

Dengan begitu, orang-orang dengan JavaScript dinonaktifkan diarahkan ke search.phpsementara pemirsa Anda dengan JavaScript melihat fungsionalitas yang ditingkatkan.

Andrew Moore
sumber
17

Saya pribadi menggunakannya dalam kombinasi. Sebagai contoh:

HTML

<a href="#">Link</a>

dengan sedikit jQuery

$('a[href="#"]').attr('href','javascript:void(0);');

atau

$('a[href="#"]').click(function(e) {
   e.preventDefault();
});

Tapi saya menggunakan itu hanya untuk mencegah halaman melompat ke atas ketika pengguna mengklik jangkar kosong. Saya jarang menggunakan onClick dan onacara lainnya langsung dalam HTML.

Saran saya adalah menggunakan <span>elemen dengan classatribut bukan jangkar. Sebagai contoh:

<span class="link">Link</span>

Kemudian tetapkan fungsinya .linkdengan skrip yang dibungkus di badan dan tepat sebelum </body>tag atau dalam dokumen JavaScript eksternal.

<script>
    (function($) {
        $('.link').click(function() {
            // do something
        });
    })(jQuery);
</script>

* Catatan: Untuk elemen yang dibuat secara dinamis, gunakan:

$('.link').on('click', function() {
    // do something
});

Dan untuk elemen yang dibuat secara dinamis yang dibuat dengan elemen yang dibuat secara dinamis, gunakan:

$(document).on('click','.link', function() {
    // do something
});

Kemudian Anda bisa mendesain elemen rentang agar terlihat seperti jangkar dengan sedikit CSS:

.link {
    color: #0000ee;
    text-decoration: underline;
    cursor: pointer;
}
.link:active {
    color: red;
}

Berikut ini adalah contoh jsFiddle di atas.

mdesdev
sumber
16

Bergantung pada apa yang ingin Anda capai, Anda bisa melupakan onclick dan cukup gunakan href:

<a href="javascript:myJsFunc()">Link Text</a>

Itu sekitar kebutuhan untuk mengembalikan false. Saya tidak suka #opsi karena, seperti yang disebutkan, itu akan membawa pengguna ke bagian atas halaman. Jika Anda memiliki tempat lain untuk mengirim pengguna jika mereka tidak mengaktifkan JavaScript (yang jarang terjadi di tempat saya bekerja, tetapi ide yang sangat bagus), maka metode yang diusulkan Steve berfungsi dengan baik.

<a href="javascriptlessDestination.html" onclick="myJSFunc(); return false;">Link text</a>

Terakhir, Anda dapat menggunakan javascript:void(0)jika Anda tidak ingin ada orang pergi ke mana pun dan jika Anda tidak ingin memanggil fungsi JavaScript. Ini bekerja sangat baik jika Anda memiliki gambar yang Anda inginkan terjadi peristiwa mouseover, tetapi tidak ada yang bisa diklik pengguna.

Akan Membaca
sumber
3
Satu-satunya downside dengan ini (dari memori, saya mungkin salah) adalah bahwa IE tidak menganggap A sebagai A jika Anda tidak memiliki href di dalamnya. (Jadi aturan CSS tidak akan berfungsi)
Benjol
16

Ketika saya punya beberapa tautan palsu, saya lebih suka memberi mereka kelas 'tanpa tautan'.

Kemudian di jQuery, saya menambahkan kode berikut:

$(function(){
   $('.no-link').click(function(e){
       e.preventDefault();
   });
});

Dan untuk HTML, tautannya sederhana

<a href="/" class="no-link">Faux-Link</a>

Saya tidak suka menggunakan Hash-Tag kecuali mereka digunakan untuk jangkar, dan saya hanya melakukan di atas ketika saya punya lebih dari dua tautan palsu, kalau tidak saya akan menggunakan javascript: void (0).

<a href="javascript:void(0)" class="no-link">Faux-Link</a>

Biasanya, saya ingin menghindari menggunakan tautan sama sekali dan hanya membungkus sesuatu dalam rentang dan menggunakannya sebagai cara untuk mengaktifkan beberapa kode JavaScript, seperti pop-up atau mengungkapkan konten.

Stacks on Stacks on Stacks
sumber
16

Saya yakin Anda menunjukkan dikotomi yang salah. Ini bukan hanya dua opsi.

Saya setuju dengan Tn. D4V360 yang menyarankan itu, meskipun Anda menggunakan tag jangkar, Anda tidak benar-benar memiliki jangkar di sini. Yang Anda miliki hanyalah bagian khusus dari dokumen yang harus berperilaku sedikit berbeda. Sebuah <span>tag jauh lebih tepat.

Manusia Cerdas
sumber
Juga jika Anda mengganti adengan span, Anda harus ingat untuk membuatnya fokus melalui keyboard.
AndFisher
16

Saya mencoba keduanya di google chrome dengan alat pengembang, dan id="#"butuh 0,32 detik. Sedangkan javascript:void(0)metode hanya butuh 0,18 detik. Jadi di google chrome, javascript:void(0)bekerja lebih baik dan lebih cepat.

user6460587
sumber
Sebenarnya mereka tidak melakukan hal yang sama. # membuat Anda melompat ke atas halaman.
Jochen Schultz
13

Saya pada dasarnya mengutip dari artikel praktis ini menggunakan peningkatan progresif . Jawaban singkatnya adalah bahwa Anda tidak pernah menggunakan javascript:void(0);atau #kecuali antarmuka pengguna Anda telah menyimpulkan bahwa JavaScript diaktifkan, dalam hal ini Anda harus menggunakanjavascript:void(0); . Juga, jangan gunakan span sebagai tautan, karena itu semantik semula.

Menggunakan rute URL SEO friendly di aplikasi Anda, seperti / Home / Action / Parameter adalah praktik yang baik juga. Jika Anda memiliki tautan ke halaman yang berfungsi tanpa JavaScript terlebih dahulu, Anda dapat meningkatkan pengalaman sesudahnya. Gunakan tautan asli ke halaman kerja, lalu tambahkan acara onlick untuk menyempurnakan presentasi.

Berikut ini contohnya. Beranda / ChangePicture adalah tautan yang berfungsi ke formulir pada halaman yang dilengkapi dengan antarmuka pengguna dan tombol kirim HTML standar, tetapi tampaknya lebih baik disuntikkan ke dalam dialog modal dengan tombol jQueryUI. Either way bekerja, tergantung pada browser, yang memuaskan pengembangan pertama mobile.

<p><a href="Home/ChangePicture" onclick="return ChangePicture_onClick();" title="Change Picture">Change Picture</a></p>

<script type="text/javascript">
    function ChangePicture_onClick() {
        $.get('Home/ChangePicture',
              function (htmlResult) {
                  $("#ModalViewDiv").remove(); //Prevent duplicate dialogs
                  $("#modalContainer").append(htmlResult);
                  $("#ModalViewDiv").dialog({
                      width: 400,
                      modal: true,
                      buttons: {
                          "Upload": function () {
                              if(!ValidateUpload()) return false;
                              $("#ModalViewDiv").find("form").submit();
                          },
                          Cancel: function () { $(this).dialog("close"); }
                      },
                      close: function () { }
                  });
              }
        );
        return false;
    }
</script>
Josh Simerman
sumber
Dalam hal SEO saya lebih suka cara ini. Menggunakan banyak URL yang ramah pasti akan meningkatkan faktor nilai halaman.
Chetabahana