Yang "href" nilai yang harus saya gunakan untuk JavaScript link, "#" atau "javascript:void(0)"?

Saya menggunakan javascript:void(0).

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

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

Tapi kemudian mereka lupa untuk menggunakan kembali melakukan sesuatu() onclick dan hanya menggunakan melakukan sesuatu().

Alasan kedua untuk menghindari # ini yang terakhir return false; tidak akan mengeksekusi jika disebut fungsi melempar kesalahan. Oleh karena itu pengembang juga harus ingat untuk menangani kesalahan dengan tepat di atas disebut fungsi.

Alasan ketiga adalah bahwa ada kasus di mana onclick event properti ditugaskan secara dinamis. Saya lebih memilih untuk dapat memanggil fungsi atau menetapkan secara dinamis tanpa harus kode fungsi khusus untuk salah satu metode lampiran atau yang lain. Oleh karena itu saya onclick (atau apapun) di markup HTML terlihat seperti ini:

onclick="someFunc.call(this)"

ATAU

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

Menggunakan javascript:void(0) menghindari semua hal di atas kepala, dan aku belum't menemukan contoh-contoh dari sisi negatifnya.

Jadi jika anda're tunggal pengembang kemudian anda dapat dengan jelas membuat pilihan anda sendiri, tetapi jika anda bekerja sebagai sebuah tim, anda harus baik negara:

Gunakan href="#", pastikan onclick selalu berisi return false; pada akhirnya, bahwa setiap yang disebut fungsi tidak melempar kesalahan dan jika anda melampirkan fungsi dinamis untuk onclick property pastikan bahwa serta tidak melemparkan kesalahan itu kembali palsu.

ATAU

Gunakan href="javascript:void(0)"

Yang kedua adalah jelas jauh lebih mudah untuk berkomunikasi.

Tidak.

Jika anda dapat memiliki URL yang sebenarnya yang membuat rasa menggunakannya sebagai HREF. Onclick won't api jika seseorang tengah-klik pada link untuk membuka tab baru atau jika mereka memiliki JavaScript dinonaktifkan.

Jika itu tidak mungkin, maka anda setidaknya harus menyuntikkan tag anchor ke dalam dokumen dengan JavaScript dan sesuai klik event handler.

Saya menyadari ini isn't selalu mungkin, tapi menurut saya itu harus diupayakan dalam mengembangkan situs web publik.

Check out JavaScript dan Progressive enhancement (kedua Wikipedia).

Melakukan <a href="#" onclick="myJsFunc();">Link</a> atau <a href="javascript:void(0)" onclick="myJsFunc();">Link</a> atau apa pun yang lain yang berisi onclick atribut - oke kembali lima tahun yang lalu, meskipun sekarang ini dapat menjadi praktek yang buruk. Berikut ini's mengapa:

1. Mempromosikan praktek menonjol JavaScript - yang telah berubah menjadi sulit untuk mempertahankan dan sulit untuk skala. Lebih lanjut tentang ini di JavaScript.

2. Anda're menghabiskan waktu anda menulis sangat terlalu verbose kode yang sangat sedikit (jika ada) manfaat untuk anda codebase.

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

Tidak mengganggu JavaScript cara

Hanya don't memiliki href atribut sama sekali! Bagus CSS reset akan mengurus hilang default kursor gaya, jadi yang non-isu. Kemudian pasang JavaScript anda menggunakan fungsi anggun dan tidak mengganggu praktek-praktek terbaik - yang lebih banyak dipelihara sebagai JavaScript logika tetap dalam JavaScript, bukan di markup anda - yang penting ketika anda mulai mengembangkan skala besar aplikasi JavaScript yang membutuhkan logika dapat dibagi menjadi blackboxed komponen dan template. Lebih lanjut tentang ini di skala Besar Aplikasi JavaScript Arsitektur

Kode sederhana contoh

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="cancel-action">Cancel this action</a>

// 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; }

A blackboxed Backbone.js contoh

Untuk scalable, blackboxed, Backbone.js komponen contoh - [lihat ini bekerja jsfiddle contoh berikut ini][5]. Perhatikan bagaimana kita memanfaatkan JavaScript praktek, dan dalam jumlah kecil dari kode yang memiliki komponen yang dapat diulang di halaman beberapa kali tanpa efek samping atau konflik antara berbagai komponen contoh. Menakjubkan!

Catatan

• Menghilangkan href atribut pada a elemen akan menyebabkan elemen tidak dapat diakses menggunakan tab tombol navigasi. Jika anda berharap untuk elemen-elemen yang akan diakses melalui tab tombol, anda dapat mengatur tabindex atribut, atau menggunakan tombol unsur-unsur sebagai gantinya. Anda dapat dengan mudah gaya tombol unsur-unsur yang terlihat seperti link normal seperti yang disebutkan di Tracker1's jawaban.

• 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 JavaScript sederhana shim untuk mencapai hal ini melalui a.hover sebagai gantinya. Yang sangat oke, karena jika anda don't memiliki atribut href, dan tidak ada degradasi anggun maka link anda memenangkan't bekerja pula - dan anda'll memiliki masalah yang lebih besar untuk khawatir tentang.

• Jika anda ingin tindakan anda untuk tetap bekerja dengan JavaScript dinonaktifkan, maka menggunakan a elemen dengan href atribut yang masuk ke beberapa URL yang akan melakukan tindakan secara manual, bukan melalui permintaan Ajax atau apapun yang harus menjadi cara untuk pergi. Jika anda melakukan ini, maka anda ingin memastikan anda melakukan acara.preventDefault() pada anda klik panggilan untuk memastikan ketika tombol diklik tidak mengikuti link. Pilihan ini disebut degradasi anggun.

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

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

Saya akan jujur menyarankan tidak. Saya akan menggunakan bergaya <tombol></tombol> 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 link.</p>

Dengan cara ini anda dapat menetapkan onclick. Saya juga menyarankan mengikat via script, tidak menggunakan onclick atribut pada elemen tag. Satu-satunya gotcha adalah pseudo efek teks 3d di IEs tua yang tidak dapat dinonaktifkan.

Jika anda HARUS menggunakan elemen, gunakan javascript:void(0); karena alasan-alasan yang telah disebutkan.

• Akan selalu mencegat dalam kasus anda event onclick gagal.
• Tidak akan memiliki bandel beban panggilan terjadi, atau memicu peristiwa lain berdasarkan hash perubahan
• Tag hash dapat menyebabkan perilaku tak terduga jika klik jatuh melalui (onclick melempar), menghindarinya kecuali's jatuh tepat-melalui perilaku, dan anda ingin mengubah sejarah navigasi.

CATATAN: Anda dapat mengganti 0 dengan string seperti javascript:void('Menghapus record 123') yang dapat berfungsi sebagai indikator yang akan menunjukkan apa yang klik akan benar-benar melakukannya.

Yang pertama, idealnya dengan real link untuk mengikuti dalam kasus pengguna telah JavaScript dinonaktifkan. Hanya pastikan untuk kembali palsu untuk mencegah klik acara dari menembak jika mengeksekusi JavaScript.

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

Jika anda menggunakan Angular2, ini cara kerjanya:

<a [routerLink]="" (klik)="passTheSalt()">Klik saya</a>.

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

Baik jika anda bertanya kepada saya;

Jika anda "link" mempunyai maksud dan tujuan untuk menjalankan beberapa kode JavaScript itu doesn't memenuhi syarat sebagai link; bukan bagian dari teks dengan fungsi JavaScript ditambah untuk itu. Saya akan merekomendasikan untuk menggunakan <span> tag dengan handler onclick yang melekat padanya dan beberapa dasar CSS untuk immitate link. Link yang dibuat untuk navigasi, dan jika kode JavaScript anda isn't untuk navigasi seharusnya tidak menjadi <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>

Idealnya anda'd lakukan ini:

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

Atau, bahkan lebih baik, anda'd memiliki tindakan default link pada HTML, dan anda'd tambahkan event onclick untuk unsur diam-diam melalui JavaScript setelah DOM membuat, sehingga memastikan bahwa jika JavaScript tidak hadir/dimanfaatkan anda don't memiliki berguna event handler riddling kode anda dan berpotensi obfuscating (atau setidaknya mengganggu dari) anda dengan konten yang sebenarnya.

Hanya menggunakan # membuat beberapa gerakan lucu, jadi saya akan merekomendasikan untuk menggunakan #diri jika anda ingin menghemat mengetik upaya JavaScript bla, bla,.

Saya menggunakan kode berikut

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

bukan

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

Saya setuju dengan saran-saran di tempat lain yang menyatakan bahwa anda harus menggunakan regular URL di href atribut, kemudian memanggil beberapa fungsi JavaScript di onclick. Cacat adalah, bahwa mereka otomatis menambah return false setelah panggilan.

Masalah dengan pendekatan ini adalah, bahwa jika fungsi tidak akan bekerja atau jika ada akan menjadi masalah, link akan menjadi diklik. Event Onclick akan selalu kembali palsu, sehingga URL normal tidak akan dipanggil.

Ada's solusi yang sangat sederhana. Mari fungsi mengembalikan true jika bekerja dengan benar. Kemudian menggunakan nilai yang dikembalikan untuk menentukan apakah klik tersebut 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>

Catatan, bahwa aku meniadakan hasil dari melakukan sesuatu() fungsi. Jika berhasil, itu akan kembali benar, sehingga akan ditiadakan (false) dan path/to/some/URL tidak akan dipanggil. Jika fungsi yang akan menghasilkan false (untuk contoh, browser doesn't mendukung sesuatu yang digunakan dalam fungsi atau apa pun yang tidak beres), hal ini menegasikan untuk benar dan path/to/some/URL disebut.

# lebih baik dari javascript:apa-apa, tapi berikut ini adalah yang 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 anggun (dalam hal pengguna doesn't memiliki JavaScript diaktifkan...dan ketika itu dengan spesifikasi. dan anggaran). Juga, itu dianggap bentuk buruk untuk menggunakan JavaScript atribut dan protokol langsung di HTML.

Jawaban dihapus di protes JADI's kepemimpinan dan pengobatan mereka Monica.

Kecuali anda're menuliskan link menggunakan JavaScript (sehingga anda tahu itu's diaktifkan di browser), anda idealnya harus memberikan link yang tepat untuk orang-orang yang browsing dengan JavaScript dinonaktifkan dan kemudian mencegah tindakan default link pada event onclick. Dengan cara ini orang-orang dengan JavaScript diaktifkan akan menjalankan fungsi dan orang-orang dengan JavaScript yang dinonaktifkan akan melompat ke halaman yang sesuai (atau lokasi dalam halaman yang sama) daripada hanya mengklik link dan memiliki apa-apa terjadi.

Pasti hash (#) lebih baik karena di JavaScript itu adalah pseudoscheme:

1. mencemari sejarah
2. instantiates salinan baru dari mesin
3. berjalan dalam lingkup global dan doesn't menghormati peristiwa sistem.

Tentu saja "#" dengan aplikasi handler onclick yang mencegah tindakan default [jauh] lebih baik. Selain itu, link yang memiliki tujuan tunggal untuk menjalankan JavaScript tidak benar-benar "link" kecuali anda mengirim pengguna ke beberapa masuk akal anchor pada halaman (hanya # akan mengirim ke atas) ketika sesuatu berjalan salah. Anda hanya dapat mensimulasikan tampilan dan nuansa dari link dengan stylesheet dan melupakan href semua.

Selain itu, mengenai cowgod's saran, terutama yang ini: ...href="javascript_required.html" onclick="... Ini adalah pendekatan yang baik, tapi itu doesn't membedakan antara "JavaScript dinonaktifkan" dan "onclick gagal" skenario.

Saya biasanya pergi untuk

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

It's lebih pendek dari javascript:void(0) dan melakukan hal yang sama.

Saya akan menggunakan:

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

Alasan:**

1. Hal ini membuat href sederhana, search engine perlu itu. Jika anda menggunakan apa-apa lagi ( seperti string), dapat menyebabkan 404 not found kesalahan.
2. Ketika mouse berada di atas link, itu doesn't menunjukkan bahwa itu adalah sebuah script.
3. Dengan menggunakan return false;, halaman doesn't melompat ke atas atau istirahat tombol back.

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

Jadi, ketika anda melakukan beberapa JavaScript hal-hal dengan sebuah <a /> tag dan jika anda menempatkan href="#" juga, anda dapat menambahkan return false di akhir acara (dalam kasus inline acara mengikat) seperti:

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

Atau anda dapat mengubah href atribut dengan JavaScript seperti:

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

atau

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

Tetapi secara semantik, semua cara-cara di atas untuk mencapai hal ini adalah salah (itu bekerja dengan baik meskipun). Jika setiap elemen ini tidak dibuat untuk menavigasi halaman yang memiliki beberapa JavaScript hal-hal yang terkait dengan itu, maka seharusnya tidak menjadi <a> tag.

Anda hanya dapat menggunakan <tombol /> bukan untuk melakukan hal-hal atau elemen lain seperti b, rentang atau apapun sesuai tidak sesuai dengan kebutuhan anda, karena anda diperbolehkan untuk menambahkan acara pada semua elemen.

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

Dan pada akhirnya, jika anda mengikat acara dari kode JavaScript itu sendiri, ada yang dapat anda lakukan acara.preventDefault() untuk mencapai hal ini jika anda menggunakan <a> tag, tapi jika anda tidak menggunakan <a> tag untuk ini, anda mendapatkan keuntungan, anda don't perlu untuk melakukan hal ini.

Jadi, jika anda melihat, itu's baik untuk tidak menggunakan tag untuk hal semacam ini.

Don't menggunakan link untuk tujuan menjalankan JavaScript.

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

Sebaliknya, gunakan elemen lainnya dari sebuah link:

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

Dan gaya dengan CSS:

.funcActuator { 
  cursor: default;
}

.funcActuator:hover { 
  color: #900;
}