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


Berikut ini adalah dua metode membangun tautan yang memiliki tujuan tunggal menjalankan kode JavaScript. Mana yang lebih baik, dalam hal fungsi, kecepatan memuat halaman, tujuan 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>


3672


asal


Jawaban:


saya menggunakan javascript:void(0).

Tiga alasan. Mendorong penggunaan # di antara tim pengembang pasti mengarah ke beberapa menggunakan nilai kembalian dari fungsi yang disebut seperti ini:

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

Tapi kemudian mereka lupa menggunakannya return doSomething() di onclick dan hanya digunakan doSomething().

Alasan kedua untuk menghindar # adalah yang terakhir return false; tidak akan dijalankan jika fungsi yang dipanggil melempar kesalahan. Oleh karena itu para pengembang harus juga ingat untuk menangani kesalahan apa pun secara tepat dalam fungsi yang disebut.

Alasan ketiga adalah bahwa ada kasus di mana onclick properti acara ditugaskan secara dinamis. Saya lebih suka dapat memanggil fungsi atau menugaskannya secara dinamis tanpa harus mengkodekan fungsi khusus untuk satu metode lampiran atau yang lain. Oleh karena itu saya onclick (atau pada 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 sisi negatifnya.

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

Menggunakan href="#", yakinkan onclick selalu mengandung return false; pada akhirnya, bahwa setiap fungsi yang dipanggil tidak membuang kesalahan dan jika Anda melampirkan fungsi secara dinamis ke onclick properti memastikan bahwa serta tidak membuang kesalahan itu kembali false.

ATAU

Menggunakan href="javascript:void(0)"

Yang kedua jelas lebih mudah untuk berkomunikasi.


2006



Bukan keduanya.

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

Jika itu tidak mungkin, maka Anda setidaknya harus menyuntikkan tag anchor ke dalam dokumen dengan JavaScript dan penangan kejadian klik yang sesuai.

Saya menyadari hal ini tidak selalu mungkin, tetapi menurut pendapat saya, hal ini harus diperjuangkan dalam mengembangkan situs web publik apa pun.

Periksa JavaScript tidak obyektif dan Peningkatan progresif (keduanya Wikipedia).


1198



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

  1. Ini mempromosikan praktik JavaScript obtrusif - yang ternyata sulit dipertahankan dan sulit untuk diukur. Lebih lanjut tentang ini di JavaScript tidak obyektif.

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

  3. Sekarang ada cara yang lebih baik, mudah, dan lebih mudah dipelihara dan skalabel untuk mencapai hasil yang diinginkan.

Cara JavaScript yang tidak mengganggu

Hanya tidak punya href atribut sama sekali! Setiap pengaturan ulang CSS yang baik akan menjaga gaya kursor default yang hilang, jadi itu tidak masalah. Kemudian lampirkan fungsi JavaScript Anda menggunakan praktik terbaik yang anggun dan tidak mengganggu - yang lebih mudah dipertahankan karena logika JavaScript Anda tetap dalam JavaScript, bukan di markup Anda - yang sangat penting ketika Anda mulai mengembangkan aplikasi JavaScript berskala besar yang mengharuskan logika Anda dipisah menjadi komponen dan templat berkotak hitam. Lebih lanjut tentang ini di 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>

Kotak hitam Backbone.js contoh

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

Catatan

  • Menghilangkan href atribut pada a elemen akan menyebabkan elemen tidak dapat diakses menggunakan tab navigasi kunci. Jika Anda ingin agar elemen tersebut dapat diakses melalui tab kunci, Anda dapat mengatur tabindex atribut, atau penggunaan button elemen sebagai gantinya. Anda dapat dengan mudah menata elemen tombol agar terlihat seperti tautan normal seperti yang disebutkan di dalamnya Jawaban Tracker1.

  • Menghilangkan href atribut pada a elemen akan menyebabkan Internet Explorer 6 dan Internet Explorer 7 untuk tidak mengambil a:hover styling, itulah sebabnya kami telah menambahkan shim JavaScript sederhana untuk melakukan hal ini via a.hover sebagai gantinya. Yang benar-benar baik-baik saja, seolah-olah Anda tidak memiliki atribut href dan tidak ada degradasi yang anggun maka tautan Anda tidak akan berfungsi - dan Anda akan memiliki masalah yang lebih besar untuk dikhawatirkan.

  • Jika Anda ingin tindakan Anda masih bekerja dengan JavaScript dinonaktifkan, maka gunakan a elemen dengan href atribut yang masuk ke beberapa URL yang akan melakukan tindakan secara manual, bukan melalui permintaan Ajax atau apa pun yang seharusnya menjadi cara untuk pergi. Jika Anda melakukan ini, maka Anda ingin memastikan Anda melakukan itu event.preventDefault() pada panggilan klik Anda untuk memastikan ketika tombol diklik tidak mengikuti tautan. Pilihan ini disebut degradasi yang anggun.


734



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

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


281



Saya benar-benar tidak akan menyarankan. Saya akan menggunakan stylized <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 untuk mengikat melalui skrip, tidak menggunakan onclick atribut pada tag elemen. Satu-satunya gotcha adalah efek teks psuedo 3d dalam IE yang lebih tua yang tidak dapat dinonaktifkan.


Jika kamu HARUS gunakan elemen A, gunakan javascript:void(0); untuk alasan yang sudah disebutkan.

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

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


209



Yang pertama, idealnya dengan tautan nyata untuk diikuti jika pengguna menonaktifkan JavaScript. Cukup pastikan untuk mengembalikan false untuk mencegah peristiwa klik dari pengaktifan 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 disini https://stackoverflow.com/a/45465728/2803344


128



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 dalam HTML, dan Anda akan menambahkan acara onclick ke elemen secara tidak mencolok melalui JavaScript setelah pembuatan DOM, sehingga memastikan bahwa jika JavaScript tidak ada / dimanfaatkan, Anda tidak memiliki penangan acara yang tidak berguna yang mengoceh kode Anda dan berpotensi mengaburkan (atau setidaknya mengganggu) konten Anda yang sebenarnya.


90



Baik jika Anda bertanya kepada saya;

Jika "tautan" Anda memiliki tujuan tunggal menjalankan beberapa kode JavaScript, itu tidak memenuhi syarat sebagai tautan; alih-alih sepotong teks dengan fungsi JavaScript yang digabungkan dengannya. Saya akan merekomendasikan untuk menggunakan <span> tag dengan onclick handler melekat padanya dan beberapa CSS dasar untuk menautkan tautan. Tautan dibuat untuk navigasi, dan jika kode JavaScript Anda tidak untuk navigasi, seharusnya tidak menjadi file <a> menandai.

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>


86