it-swarm-id.com

Nilai "href" manakah 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 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>
3863
2cBGj7vsfp

Saya menggunakan javascript:void(0).

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

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

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

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

Alasan ketiga adalah bahwa ada kasus-kasus di mana properti acara onclick 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. Maka onclick saya (atau apa pun) di markup HTML terlihat seperti ini:

onclick="someFunc.call(this)"

OR

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

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

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 onclick selalu mengandung return false; di akhir, bahwa setiap fungsi yang dipanggil tidak melempar kesalahan dan jika Anda melampirkan fungsi secara dinamis ke properti onclick pastikan bahwa serta tidak membuang kesalahan, false kembali.

OR

Gunakan href="javascript:void(0)"

Yang kedua jelas jauh lebih mudah untuk berkomunikasi.

2091
AnthonyWJones

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 itu harus diupayakan untuk mengembangkan situs web publik.

LihatJavaScript tidak mencolokdanPeningkatan progresif(keduanya Wikipedia).

1251
Aaron Wagner

Melakukan <a href="#" onclick="myJsFunc();">Link</a> atau <a href="javascript:void(0)" onclick="myJsFunc();">Link</a> atau apa pun yang mengandung atribut onclick - baik-baik saja sejak lima tahun lalu, meskipun sekarang ini 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 diJavaScript tidak mengganggu.

  2. Anda menghabiskan waktu untuk menulis kode yang 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 atribut href sama sekali! Reset CSS yang baik akan mengatasi gaya kursor default yang hilang, sehingga tidak menjadi 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 diArsitektur 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>

Contoh blackboxedBackbone.js

Untuk contoh komponen scalable, blackboxed, Backbone.js -lihat contoh jsfiddle yang berfungsi di sini. Perhatikan bagaimana kami memanfaatkan 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 atribut href pada elemen a akan menyebabkan elemen tersebut tidak dapat diakses menggunakan navigasi kunci tab. Jika Anda ingin agar elemen-elemen tersebut dapat diakses melalui kunci tab, Anda dapat mengatur atribut tabindex, atau menggunakan elemen button sebagai gantinya. Anda dapat dengan mudah mendesain elemen tombol agar terlihat seperti tautan normal seperti yang disebutkan dalamJawaban pelacak1.

  • Menghilangkan atribut href pada elemen a akan menyebabkan Internet Explorer 6 dan Internet Explorer 7 tidak menggunakan gaya a:hover, itulah sebabnya kami telah menambahkan shim JavaScript sederhana untuk melakukannya melalui a.hover. 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 elemen a dengan atribut href yang masuk ke beberapa URL yang akan melakukan tindakan secara manual alih-alih melalui permintaan Ajax atau apa pun yang seharusnya menjadi jalannya. Jika Anda melakukan ini, maka Anda ingin memastikan Anda melakukan event.preventDefault() pada panggilan klik Anda untuk memastikan ketika tombol diklik itu tidak mengikuti tautan. Opsi ini disebut degradasi yang anggun.

758
balupton

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

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

302
Adam Tuttle

Sejujurnya saya tidak menyarankan. Saya akan menggunakan <button></button> bergaya 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 atribut onclick pada tag elemen. Satu-satunya gotcha adalah efek teks psuedo 3d di IE yang lebih lama yang tidak dapat dinonaktifkan.


Jika AndaHARUSmenggunakan elemen A, gunakan javascript:void(0); karena 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 tak 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 0 dengan string seperti javascript:void('Delete record 123') yang dapat berfungsi sebagai indikator tambahan yang akan menunjukkan apa yang sebenarnya dilakukan klik.

244
Tracker1

Yang pertama, idealnya dengan tautan nyata untuk diikuti jika pengguna menonaktifkan JavaScript. Pastikan untuk mengembalikan false untuk mencegah acara klik dari memunculkan 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

136
Zach

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 tag <span> dengan onclick handler terpasang padanya dan beberapa CSS dasar untuk meniru tautan. Tautan dibuat untuk navigasi, dan jika kode JavaScript Anda bukan untuk navigasi, itu tidak boleh menjadi tag <a>.

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>
95
fijter

Idealnya Anda akan melakukan ini:

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

Atau, yang 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 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.

95
Steve Paulo

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

75
Spammer Joe

Saya menggunakan yang berikut ini

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

sebagai gantinya

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

Saya setuju dengan saran di tempat lain yang menyatakan bahwa Anda harus menggunakan URL reguler dalam atribut href, kemudian memanggil beberapa fungsi JavaScript di onclick. Kekurangannya adalah, mereka secara otomatis menambahkan return false setelah 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 mengembalikan false, sehingga URL normal tidak akan dipanggil.

Ada solusi yang sangat sederhana. Biarkan fungsi mengembalikan true jika 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 fungsi doSomething(). Jika berhasil, itu akan mengembalikan true, sehingga akan dinegasikan (false) dan path/to/some/URL tidak akan dipanggil. Jika fungsi akan mengembalikan false (misalnya, browser tidak mendukung sesuatu yang digunakan dalam fungsi atau ada yang salah), itu dinegasikan ke true dan path/to/some/URL dipanggil.

53
Fczbkk

# lebih baik dari javascript:anything, tetapi berikut ini 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 (jika 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.

50
Justin Johnson

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 fungsinya 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.

38
Simon Forrest

Saya merekomendasikan menggunakan elemen <button> 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 .)

37
phyzome

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 (cukup # 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".

35
Free Consulting

Saya biasanya pergi untuk

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

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

30
dnetix

Saya akan menggunakan:

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

Alasan:

  1. Ini membuat href sederhana, mesin pencari membutuhkannya. Jika Anda menggunakan hal lain (seperti string), ini dapat menyebabkan kesalahan 404 not found.
  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 tombol back.
27
Eric Yin

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

25
user564706

Jadi, ketika Anda melakukan beberapa hal JavaScript dengan tag <a /> dan jika Anda juga menaruh href="#", Anda dapat menambahkan return false di akhir acara (jika ada 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>

Tetapi secara semantik, semua cara di atas untuk mencapai ini salah (meskipun 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 menjadi tag <a>.

Anda cukup menggunakan <button /> sebagai gantinya 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 menggunakan <a href="#">. Anda mendapatkan kursor kursor secara default pada elemen itu 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, di sana Anda dapat melakukan event.preventDefault() untuk mencapai ini jika Anda menggunakan tag <a>, tetapi jika Anda tidak menggunakan tag <a> untuk ini, di sana Anda mendapatkan keuntungan, Anda tidak perlu melakukan ini.

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

23
Ashish Kumar

Akan lebih baik menggunakan jQuery,

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

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

Markup tag jangkar akan seperti

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

Cukup sederhana!

22
naveen

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;
}
22
Garrett

Jika Anda menggunakan AngularJS , Anda dapat menggunakan yang berikut:

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

Yang tidak akan melakukan apa pun.

Sebagai tambahan

  • Ini tidak akan membawa Anda ke bagian atas halaman, karena dengan (#)
    • Karenanya, Anda tidak perlu mengembalikan false secara eksplisit dengan JavaScript
  • Ini singkat
20
whirlwin

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 dengan JavaScript dinonaktifkan diarahkan ke search.php sementara pemirsa Anda dengan JavaScript melihat fungsionalitas Anda yang ditingkatkan.

19
Andrew Moore

Jika tidak ada href mungkin tidak ada alasan untuk menggunakan tag anchor.

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

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

18
achairapart

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. Tag <span> jauh lebih tepat.

16
Clever Human

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

16
user6460587

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

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

Itu mendapat sekitar kebutuhan untuk mengembalikan false. Saya tidak suka opsi # karena, seperti yang disebutkan, itu akan membawa pengguna ke 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 berfungsi dengan baik jika Anda memiliki gambar yang Anda inginkan terjadi peristiwa mouseover, tetapi tidak ada yang bisa diklik pengguna.

16
Will Read

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.

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 acara on lainnya secara langsung dalam HTML.

Saran saya adalah menggunakan elemen <span> dengan atribut class alih-alih jangkar. Sebagai contoh:

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

Kemudian tetapkan fungsi ke .link dengan skrip yang dibungkus di badan dan tepat sebelum tag </body> 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;
}

Inilaha jsFiddlecontoh di atas.

13
mdesdev

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

Menggunakan SEO rute URL yang ramah di aplikasi Anda, seperti/Home/Action/Parameter juga merupakan praktik yang baik. Jika Anda memiliki tautan ke halaman yang berfungsi tanpa JavaScript terlebih dahulu, Anda dapat meningkatkan pengalaman sesudahnya. Gunakan tautan nyata 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>
13
Josh Simerman

Anda juga dapat menulis petunjuk di jangkar seperti ini:

<a href="javascript:void('open popup image')" onclick="return f()">...</a>

jadi pengguna akan tahu apa yang dilakukan tautan ini.

11
Lukom

Saya akan mengatakan cara terbaik adalah membuat jangkar href ke ID yang tidak pernah Anda gunakan, seperti # Do1Not2Use3This4Id5 atau ID serupa, bahwa Anda 100% yakin tidak ada yang akan menggunakan dan tidak akan menyinggung orang.

  1. Javascript:void(0) adalah ide yang buruk dan melanggar Kebijakan Keamanan Konten pada halaman HTTPS yang diaktifkan CSP https://developer.mozilla.org/en/docs/Security/CSP (terima kasih ke @ jakub.g)
  2. Hanya dengan menggunakan # akan membuat pengguna melompat kembali ke atas ketika ditekan
  3. Tidak akan merusak halaman jika JavaScript tidak diaktifkan (kecuali jika Anda memiliki kode pendeteksian JavaScript
  4. Jika JavaScript diaktifkan, Anda dapat menonaktifkan acara default
  5. Anda harus menggunakan href kecuali Anda tahu cara mencegah browser Anda memilih teks, (tidak tahu apakah menggunakan 4 akan menghapus hal yang membuat browser berhenti memilih teks)

Pada dasarnya tidak ada yang disebutkan 5 dalam artikel ini yang menurut saya penting karena situs Anda dianggap tidak profesional jika tiba-tiba mulai memilih hal-hal di sekitar tautan.

11
Anders M.

Sangat menyenangkan memiliki situs Anda dapat diakses oleh pengguna dengan JavaScript dinonaktifkan, dalam hal ini href menunjuk ke halaman yang melakukan tindakan yang sama dengan JavaScript dieksekusi. Kalau tidak, saya menggunakan " # " dengan "return false;" untuk mencegah tindakan default (gulir ke atas halaman) seperti yang disebutkan orang lain.

Googling untuk "javascript:void(0)" "menyediakan banyak informasi tentang topik ini. Beberapa dari mereka, seperti ini sebutkan alasan untuk TIDAK menggunakan void (0) .

10
mmacaulay

Saya melihat banyak jawaban oleh orang-orang yang ingin tetap menggunakan nilai # untuk href, oleh karena itu, inilah jawaban yang diharapkan memuaskan kedua kubu:

A) Saya senang memiliki javascript:void(0) sebagai nilai href saya:

<a href="javascript:void(0)" onclick="someFunc.call(this)">Link Text</a>

B) Saya menggunakan jQuery, dan ingin # sebagai nilai href saya:

<a href="#" onclick="someFunc.call(this)">Link Text</a>

<script type="text/javascript">
    /* Stop page jumping when javascript links are clicked.
       Only select links where the href value is a #. */
    $('a[href="#"]').live("click", function(e) {
         return false; // prevent default click action from happening!
         e.preventDefault(); // same thing as above
    });
</script>

Catatan, jika Anda tahu tautan tidak akan dibuat secara dinamis, gunakan fungsi click sebagai gantinya:

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

9
dazbradbury

Ada satu hal lagi yang penting untuk diingat di sini. Bagian 508 kepatuhan. Karena itu, saya merasa perlu untuk menunjukkan bahwa Anda memerlukan tag jangkar untuk pembaca layar seperti JAWS untuk dapat memfokuskannya melalui tab. Jadi solusinya "cukup gunakan JavaScript dan lupakan jangkar untuk memulainya" bukanlah pilihan untuk hal ini. Memecat JavaScript di dalam href hanya diperlukan jika Anda tidak mampu untuk layar melompat kembali ke atas. Anda dapat menggunakan settimeout selama 0 detik dan memiliki JavaScript yang menyala ke tempat Anda membutuhkan fokus tetapi bahkan halaman akan melompat ke atas dan kemudian kembali.

9
rcof

Saya menggunakan href = "#" untuk tautan yang saya inginkan untuk perilaku dummy. Maka saya menggunakan kode ini:

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

Berarti jika href sama dengan hash (* = "#") itu mencegah perilaku tautan default, sehingga masih memungkinkan Anda untuk menulis fungsionalitas untuk itu, dan itu tidak mempengaruhi klik jangkar.

9
Vinny Fonseca

Yang saya mengerti dari kata-kata Anda adalah bahwa Anda ingin membuat tautan hanya untuk menjalankan kode JavaScript.

Maka Anda harus mempertimbangkan bahwa ada orang yang memblokir JavaScript di browser mereka.

Jadi jika Anda benar-benar akan menggunakan tautan itu hanya untuk menjalankan fungsi JavaScript maka Anda harus menambahkannya secara dinamis sehingga tidak akan terlihat bahkan jika pengguna tidak mengaktifkan JavaScript di browser dan Anda menggunakan tautan itu hanya untuk memicu fungsi JavaScript yang tidak masuk akal untuk menggunakan tautan seperti itu ketika JavaScript dinonaktifkan di browser.

Karena alasan itu, keduanya tidak baik ketika JavaScript dinonaktifkan.

Aand jika JavaScript diaktifkan dan Anda hanya ingin menggunakan tautan itu untuk menjalankan fungsi JavaScript

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

jauh lebih baik daripada menggunakan

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

karena href = "#" akan menyebabkan halaman melakukan tindakan yang tidak diperlukan.

Juga, alasan lain mengapa <a href="javascript:void(0)" onclick="myJsFunc();">Link</a> lebih baik daripada <a href="#" onclick="myJsFunc();">Link</a> adalah JavaScript digunakan sebagai bahasa skrip default untuk sebagian besar browser. Sebagai contoh Internet Explorer, gunakan atribut onclick untuk menentukan jenis bahasa scripting yang akan digunakan. Kecuali bahasa skrip yang bagus lainnya muncul, JavaScript akan digunakan oleh Internet Explorer sebagai default juga, tetapi jika bahasa skrip lain menggunakan javascript:, itu akan membuat Internet Explorer memahami bahasa skrip yang sedang digunakan.

Mempertimbangkan hal ini, saya lebih suka menggunakan dan berolahraga

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

cukup untuk menjadikannya kebiasaan dan agar lebih ramah pengguna, harap tambahkan tautan semacam itu dalam kode JavaScript:

$(document).ready(function(){
    $(".blabla").append('<a href="javascript:void(0)" onclick="myJsFunc();">Link</a>')
});
8
Berker Yüceer

Anda dapat menggunakan href dan menghapus semua tautan yang hanya memiliki hash:

HTML:

<a href="#" onclick="run_foo()"> foo </a>

JS:

$(document).ready(function(){         // on DOM ready or some other event

   $('a[href=#]').attr('href','');    // set all reference handles to blank strings
                                      //  for anchors that have only hashes

});
8
vol7ron

Kenapa tidak menggunakan ini? Ini tidak menggulung halaman ke atas.

<span role="button" onclick="myJsFunc();">Run JavaScript Code</span>
8
AlxGol

Idealnya Anda harus memiliki URL nyata sebagai cadangan untuk pengguna non-JavaScript.

Jika ini tidak masuk akal, gunakan # sebagai atribut href. Saya tidak suka menggunakan atribut onclick karena ia menyematkan JavaScript langsung ke HTML. Ide yang lebih baik adalah menggunakan file JS eksternal dan kemudian menambahkan event handler ke tautan itu. Anda kemudian dapat mencegah acara default sehingga URL tidak berubah untuk menambahkan # setelah pengguna mengkliknya.

7
Peter

Dalam perjanjian total dengan keseluruhan sentimen, gunakan void(0) saat Anda membutuhkannya, dan gunakan URL yang valid saat Anda membutuhkannya.

Menggunakan penulisan ulang URL Anda dapat membuat URL yang tidak hanya melakukan apa yang ingin Anda lakukan dengan JavaScript dinonaktifkan, tetapi juga memberi tahu Anda dengan pasti apa yang akan dilakukan.

<a href="./Readable/Text/URL/Pointing/To/Server-Side/Script" id="theLinkId">WhyClickHere</a>

Di sisi server, Anda hanya perlu mengurai URL dan string kueri dan melakukan apa yang Anda inginkan. Jika Anda pintar, Anda dapat mengizinkan skrip sisi server untuk menanggapi permintaan Ajax dan standar secara berbeda. Mengizinkan Anda memiliki kode terpusat ringkas yang menangani semua tautan di laman Anda.

Tutorial penulisan ulang URL

Pro

  • Ditampilkan di bilah status
  • Mudah ditingkatkan ke Ajax melalui onclick handler di JavaScript
  • Praktis berkomentar sendiri
  • Membuat direktori Anda tidak terkotori dengan file HTML sekali pakai

Cons

  • Harus tetap menggunakan event.preventDefault () dalam JavaScript
  • Penanganan jalur yang cukup rumit dan penguraian URL di sisi server.

Saya yakin ada banyak lagi kontra di luar sana. Silakan mendiskusikannya.

7
user394888

Di situs web modern penggunaan href harus dihindari jika elemen tersebut hanya melakukan fungsi JavaScript (bukan tautan asli).

Mengapa? Kehadiran elemen ini memberi tahu browser bahwa ini adalah tautan dengan tujuan. Dengan itu, browser akan menampilkan fungsi Buka Di Tab Baru/Jendela (juga dipicu ketika Anda menggunakan shift + klik). Melakukannya akan menghasilkan membuka halaman yang sama tanpa memicu fungsi yang diinginkan (mengakibatkan frustrasi pengguna).

Dalam hal IE: Pada IE8, penataan elemen (termasuk hover) berfungsi jika doctype diatur. Versi lain dari IE tidak lagi perlu dikhawatirkan.

Hanya Kekurangan: Menghapus HREF menghapus tabindex. Untuk mengatasinya, Anda dapat menggunakan tombol yang ditata sebagai tautan atau menambahkan atribut tabindex menggunakan JS.

7
TomDK

Jika Anda menggunakan elemen <a>, cukup gunakan ini:

<a href="javascript:myJSFunc();" />myLink</a>

Secara pribadi saya akan melampirkan pengendali acara dengan JavaScript nanti (menggunakan attachEvent atau addEventListener atau mungkin <letakkan kerangka JavaScript favorit Anda di sini>).

7
Pablo Cabrera

Jangan lupa fakta bahwa URL Anda mungkin diperlukan - klik pada dipecat sebelum referensi diikuti, jadi kadang-kadang Anda perlu memproses sesuatu di sisi klien sebelum menavigasi dari halaman.

7
nathaniel

Hanya untuk mengambil poin beberapa yang telah disebutkan.

Jauh lebih baik untuk mengikat acara 'onload'a atau $ (' dokumen '). Ready {}; kemudian untuk menempatkan JavaScript langsung ke acara klik.

Dalam hal JavaScript tidak tersedia, saya akan menggunakan href ke URL saat ini, dan mungkin jangkar ke posisi tautan. Halaman ini masih dapat digunakan untuk orang-orang tanpa JavaScript yang tidak akan melihat perbedaan.

Seperti yang saya miliki, ada beberapa jQuery yang mungkin membantu:

var [functionName] = function() {
   // do something
};

jQuery("[link id or other selector]").bind("click", [functionName]);
6
Matt Goddard

Jika Anda menggunakan tautan sebagai cara untuk hanya mengeksekusi beberapa kode JavaScript (daripada disarankan menggunakan rentang seperti D4V360), lakukan:

<a href="javascript:(function()%7Balert(%22test%22)%3B%7D)()%3B">test</a>

Jika Anda menggunakan tautan dengan klik pada untuk navigasi, jangan gunakan href = "#" sebagai mundur ketika JavaScript dimatikan. Biasanya sangat menjengkelkan ketika pengguna mengklik tautan. Alih-alih, berikan tautan yang sama dengan onclick handler jika mungkin. Jika Anda tidak dapat melakukannya, lewati onclick dan cukup gunakan URI JavaScript di href.

6
Shadow2531

Saya sangat memilih untuk menjaga JavaScript saya keluar dari markup HTML saya sebanyak mungkin. Jika saya menggunakan <a> sebagai penangan acara klik maka saya akan merekomendasikan menggunakan <a class="trigger" href="#">Click me!</a>.

$('.trigger').click(function (e) {
    e.preventDefault();
    // Do stuff...
});

Sangat penting untuk dicatat bahwa banyak pengembang di luar sana percaya bahwa menggunakan tag jangkar untuk penangan peristiwa klik tidak baik. Mereka lebih suka Anda menggunakan <span> atau <div> dengan beberapa CSS yang menambahkan cursor: pointer; ke dalamnya. Ini masalah jika banyak perdebatan.

6
Jesse Atkinson

Anda tidak boleh menggunakan sebaris onclick="something();" dalam HTML Anda untuk tidak menyatukannya dengan kode yang tidak berarti; semua binding klik harus diatur dalam file Javascript (* .js).

Atur ikatan seperti ini: $('#myAnchor').click(function(){... **return false**;}); atau $('#myAnchor').bind('click', function(){... **return false**;});

Kemudian Anda memiliki file HTML bersih yang mudah dimuat (dan seo friendly) tanpa ribuan href="javascript:void(0);" dan hanya href="#"

6
G. Ghez

Berikut ini satu opsi lagi demi kelengkapan, yang mencegah tautan melakukan apa pun meskipun JavaScript dinonaktifkan, dan pendek :)

<a href="#void" onclick="myJsFunc()">Run JavaScript function</a>

Jika id tidak ada di halaman, maka tautan tidak akan melakukan apa-apa.

Secara umum, saya setuju dengan jawaban Aaron Wagner, tautan JavaScript harus disuntikkan dengan kode JavaScript ke dalam dokumen.

3
Timo Huovinen

Javascript: void(0); tidak berlaku untuk nilai nol [Tidak ditugaskan] , yang berarti browser Anda akan NULL klik keDOM, dan jendela kembali ke false.
'#' tidak mengikuti DOM atau Jendela dalam javascript. yang artinya tanda '#' di dalam jangkar href adalahTAUTAN. Tautan ke arah arus yang sama.

2
SchoolforDesign

Diedit pada 2019 Januari

Di HTML5 , menggunakan elemen tanpa atribut href adalah valid . Itu dianggap sebagai "hyperlink placeholder"

Jika elemen tidak memiliki atribut href, maka elemen tersebut mewakili placeholder untuk tempat tautan mungkin ditempatkan, jika elemen tersebut relevan, yang terdiri dari hanya konten elemen.

Contoh:

<a>previous</a>

Jika setelah itu Anda ingin melakukan sebaliknya:

1 - Jika tautan Anda tidak ke mana-mana, jangan gunakan elemen <a>. Gunakan <span> atau sesuatu yang lain yang sesuai dan tambahkan CSS :hover untuk mengubahnya sesuai keinginan.

2 - Gunakan javascript:void(0) OR javascript:undefined OR javascript:; jika Anda ingin menjadi mentah, tepat dan cepat.

2
Lyes CHIOUKH

Anda dapat menggunakan javascript: void (0) di sini alih-alih menggunakan # untuk menghentikan pengalihan tag jangkar ke bagian header.

function helloFunction() {
    alert("hello world");
}
<a href="javascript:void(0)" onclick="helloFunction();">Call Hello Function</a>
0
Javed Khan