Apa "javascript:void(0)" berarti?

batal operator mengevaluasi diberikan ekspresi dan kemudian kembali undefined.

batal operator ini sering digunakan hanya untuk mendapatkan undefined primitif nilai, biasanya menggunakan "void(0)" (yang adalah setara dengan "batal 0"). Ini kasus global variabel undefined dapat digunakan sebagai pengganti (dengan asumsi itu telah tidak ditugaskan untuk non-default nilai).

Penjelasan yang diberikan di sini: batal operator.

Alasan anda ingin melakukan hal ini dengan href dari sebuah link yang biasanya, javascript: URL akan mengarahkan browser ke versi teks hasil evaluasi yang JavaScript. Tetapi jika hasilnya adalah undefined, maka browser akan tetap pada halaman yang sama. void(0) hanya pendek dan script sederhana yang mengevaluasi ke undefined.

Selain teknis menjawab, javascript:void berarti penulis adalah Melakukan Hal yang Salah.

Tidak ada alasan yang baik untuk menggunakan javascript: pseudo-URL(*). Dalam praktek hal ini akan menimbulkan kebingungan atau kesalahan orang harus mencoba hal-hal seperti 'bookmark link', 'open link in a new tab', dan sebagainya. Hal ini terjadi cukup banyak sekarang orang-orang telah terbiasa tengah-klik-untuk-tab baru: ini terlihat seperti link, anda ingin membacanya di tab baru, tapi ternyata tidak nyata link sama sekali, dan memberikan hasil yang tidak diinginkan seperti halaman kosong atau JS kesalahan ketika tengah diklik.

<a href="#"> adalah alternatif yang umum yang mungkin bisa dibilang kurang buruk. Namun anda harus ingat untuk return false dari onclick event handler untuk mencegah link diikuti dan bergulir hingga ke bagian atas halaman.

Dalam beberapa kasus mungkin ada yang sebenarnya berguna untuk point link untuk. Misalnya jika anda memiliki kontrol anda dapat klik pada start-up yang sebelumnya tersembunyi <div id="anu">, itu masuk akal untuk menggunakan <a href="#foo"> untuk link ke sana. Atau jika ada non-JavaScript cara melakukan hal yang sama (misalnya, 'thispage.php?show=foo' yang menetapkan foo terlihat untuk memulai dengan), anda dapat link untuk itu.

Sebaliknya, jika link yang menunjuk hanya untuk beberapa script, hal ini tidak benar-benar sebuah link dan tidak harus ditandai sebagai tersebut. Pendekatan yang biasa akan menambahkan onclick ke <span>, <div>, atau <a> tanpa href dan gaya itu dalam beberapa cara untuk membuat jelas anda bisa klik di atasnya. Ini adalah apa yang StackOverflow [lakukan pada saat menulis; sekarang ia menggunakan href="#"].

Kelemahan dari ini adalah bahwa anda kehilangan kontrol keyboard, karena anda dapat't tab ke span/div/telanjang-a atau mengaktifkannya dengan ruang. Apakah ini benar-benar merugikan tergantung pada apa jenis tindakan elemen ini dimaksudkan untuk mengambil. Anda bisa, dengan beberapa upaya, upaya untuk meniru keyboard interactability dengan menambahkan tabIndex unsur, dan mendengarkan untuk Ruang menekan tombol. Tapi itu's tidak akan pernah 100% mereproduksi browser nyata perilaku, paling tidak karena browser yang berbeda dapat menanggapi keyboard yang berbeda (untuk tidak menyebutkan non-visual browser).

Jika anda benar-benar ingin sebuah elemen yang isn't link tapi yang dapat diaktifkan sebagai normal oleh mouse atau keyboard, apa yang anda inginkan adalah <button type="tombol"> (atau <input type="tombol"> adalah hanya sebagai baik, untuk sederhana tekstual isi). Anda selalu dapat menggunakan CSS untuk restyle itu sehingga terlihat lebih seperti sebuah link dari sebuah tombol, jika anda ingin. Tapi karena berperilaku seperti tombol, yang's cara yang benar-benar anda harus menandainya.

(*: di situs authoring, sih. Jelas mereka berguna untuk bookmarklet. javascript: pseudo-Url konseptual bizarreness: locator yang doesn't arahkan ke lokasi, tapi bukan panggilan aktif kode di dalam lokasi saat ini. Mereka memiliki besar disebabkan masalah keamanan untuk kedua browser dan webapps, dan seharusnya tidak pernah ditemukan oleh Netscape.)

Itu berarti ia akan melakukan apa-apa. Ini merupakan upaya untuk memiliki link tidak 'arahkan' di mana saja. Tapi itu bukan cara yang tepat.

Anda harus benar-benar hanya return false di onclick acara, seperti:

<a href="#" onclick="return false;">hello</a>

Biasanya ini digunakan jika link adalah melakukan beberapa 'JavaScript-y' hal. Seperti posting AJAX form, atau bertukar gambar, atau apapun. Dalam hal ini anda hanya membuat apapun fungsi ini dipanggil kembali palsu.

Untuk membuat website anda benar-benar mengagumkan, namun, umumnya anda akan menyertakan sebuah link yang melakukan tindakan yang sama, jika orang yang browsing itu memilih untuk tidak menjalankan JavaScript.

<a href="backup_page_displaying_image.aspx"
   onclick="return coolImageDisplayFunction();">hello</a>

Ada perbedaan BESAR dalam perilaku "#" vs javascript:void

"#" gulungan anda ke bagian ATAS halaman sementara "javascript:void(0);" tidak.

Hal ini sangat penting jika anda adalah coding halaman dinamis. pengguna tidak ingin pergi kembali ke atas hanya karena dia mengklik link pada halaman.

Ini adalah metode yang sangat populer untuk menambahkan fungsi JavaScript ke HTML link.
misalnya: [Cetak] link yang anda lihat pada banyak halaman web yang ditulis seperti ini:

<a href="javascript:void(0)" onclick="callPrintFunction()">Print</a>

Mengapa kita perlu href sementara onclick saja bisa mendapatkan pekerjaan yang dilakukan? Karena ketika pengguna mengarahkan kursor ke teks 'Print' ketika ada's tidak ada href, kursor akan berubah menjadi tanda sisipan (ꕯ) bukan pointer (👆). Hanya memiliki href pada a tag memvalidasi itu sebagai hyperlink.

Alternatif untuk href="javascript:void(0);,", adalah penggunaan href="#". Alternatif ini doesn't membutuhkan JavaScript harus diaktifkan dalam buku's browser, sehingga lebih kompatibel.

Anda harus selalu memiliki sebuah href anda a tags. Memanggil fungsi JavaScript yang mengembalikan 'undefined' akan baik-baik saja. Jadi akan menghubungkan ke '#'.

Tag Anchor di Internet Explorer 6 tanpa href tidak mendapatkan a:hover gaya diterapkan.

Ya, itu adalah mengerikan dan minor, kejahatan terhadap kemanusiaan, tetapi kemudian lagi jadi Internet Explorer 6 secara umum.

Saya harap ini membantu.

Internet Explorer 6 adalah benar-benar sebuah kejahatan besar terhadap kemanusiaan.

It's layak disebut bahwa anda'll kadang-kadang melihat kekosongan 0 ketika memeriksa undefined, hanya karena membutuhkan lebih sedikit karakter.

Misalnya:

something === undefined

vs

something === void 0

Beberapa minification metode menggantikan terdefinisi dengan void 0 untuk alasan ini.

void adalah operator yang digunakan untuk mengembalikan undefined nilai sehingga browser tidak akan dapat untuk memuat sebuah halaman baru.

Web browser akan mencoba dan mengambil apa pun yang digunakan sebagai URL dan beban kecuali itu adalah fungsi JavaScript yang mengembalikan null. Misalnya, jika kita klik sebuah link seperti ini:

<a href="javascript: alert('Hello World')">Click Me</a>

kemudian sebuah pesan peringatan akan muncul tanpa loading halaman baru, dan itu adalah karena waspada adalah sebuah fungsi yang mengembalikan nilai null. Ini berarti bahwa ketika browser mencoba untuk memuat halaman baru melihat null dan tidak ada beban.

Suatu hal yang penting untuk dicatat tentang kekosongan operator adalah bahwa hal itu memerlukan nilai dan tidak dapat digunakan oleh dirinya sendiri. Kita harus menggunakannya seperti ini:

<a href="javascript: void(0)">I am a useless link</a>

Penggunaan javascript:void(0) berarti bahwa penulis dari HTML adalah menyalahgunakan elemen anchor di tempat tombol elemen.

tag Anchor yang sering disalahgunakan dengan event onclick untuk membuat pseudo-tombol dengan menetapkan href ke "#" atau "javascript:void(0)" mencegah laman menyegarkan. Nilai-nilai ini penyebab tak terduga perilaku ketika menyalin/menyeret link, link membuka di baru tab/windows, bookmark, dan ketika JavaScript masih men-download, kesalahan, atau dinonaktifkan. Ini juga menyampaikan salah semantik untuk teknologi pendukung (misalnya, pembaca layar). Dalam kasus ini, itu adalah dianjurkan untuk menggunakan <tombol> sebagai gantinya. Secara umum anda hanya harus menggunakan jangkar untuk navigasi menggunakan URL yang tepat.

Sumber: MDN's <a> Halaman.

Untuk memahami konsep ini yang pertama harus memahami kekosongan operator pada JavaScript.

Sintaks untuk membatalkan operator adalah: batal «expr» yang mengevaluasi expr dan kembali terdefinisi.

Jika anda menerapkan batal sebagai fungsi, terlihat sebagai berikut:

function myVoid(expr) {
    return undefined;
}

Kekosongan ini operator memiliki satu penggunaan penting artinya - membuang hasil dari sebuah ekspresi.

Dalam beberapa situasi, hal ini penting untuk kembali terdefinisi sebagai lawan untuk hasil dari sebuah ekspresi. Kemudian batal dapat digunakan untuk membuang hasil itu. Salah satu situasi seperti melibatkan javascript: Url, yang harus dihindari untuk link, tapi berguna untuk bookmarklet. Ketika anda mengunjungi salah satu Url tersebut, banyak browser mengganti dokumen dengan hasil evaluasi Url "content", tetapi hanya jika hasilnya tidak terdefinisi. Oleh karena itu, jika anda ingin membuka jendela baru tanpa mengubah saat ini konten yang ditampilkan, anda dapat melakukan hal-hal berikut:

javascript:void window.open("http://example.com/")

Yang batal operator mengevaluasi diberikan ekspresi dan kemudian kembali tidak terdefinisi. Ini menghindari menyegarkan halaman.

Pengembang Web menggunakan javascript:void(0) karena itu adalah cara termudah untuk mencegah perilaku default a tag. void(*sesuatu*) mengembalikan undefined dan itu adalah falsy nilai. dan kembali falsy nilai lebih seperti return false di onclick acara a tag yang mencegah perilaku default.

Jadi saya pikir javascript:void(0) adalah cara paling sederhana untuk mencegah perilaku default a tag.

Link harus memiliki sebuah HREF target harus ditentukan untuk memungkinkan untuk dapat digunakan tampilan objek.

Kebanyakan browser tidak akan mengurai lanjutan JavaScript di

JavaScript: Url samping; ini adalah di mana kekosongan dapat berguna untuk menulis yang lebih pendek kode.

var error1 = false,
    error2 = false,
    error3 = false;

function error1() {

  error1 = true;
}

function myFunction() {

  // You can easily return and call a function at once, if you don't care about myFunction's return value
  if (!someCondition1)
    return error1();

  // What if you want to set a value first?
  if (!someCondition2) {
    error2 = true;
    return
  }

  // Shortest way to return and set a value at once
  if (!someCondition3)
    return void(error3 = true);

  // More code goes here
}

Contoh lain di mana digunakan javascript.void(0) . I'm tidak yakin apakah itu adalah cara yang benar, tetapi melakukan pekerjaan

$(document).ready(function() {
  jQuery(".show-hide-detail").hide();
  jQuery(".show-hide-detail:first").show();
  jQuery(".show-hide-btn a").click(function() {
    var thid_data = jQuery(this).attr('data-id');
    jQuery(".show-hide-btn a").removeClass('active');
    jQuery(this).addClass('active');
    if (!jQuery("#" + thid_data).is(":visible")) {
      jQuery(".show-hide-detail").hide();
      jQuery("#" + thid_data).show();
    }
  });
});

<section>
  <div class="features">
    <div class="container">
      <h1>Room Dimensions</h1>
      <p class="description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor arcu non ligula convallis, vel tincidunt ipsum posuere.sollicitudin. Duis iaculis, arcu ut hendrerit pharetra, elit augue pulvinar magna
      </p>
      <div class="dimension-btn show-hide-btn">
        <a class="active" data-id="LivingRoom">Living Room</a>
        <a href="javascript:void(0)" data-id="DiningRoom">Dining Room</a>
        <a href="javascript:void(0)" data-id="Kitchen">Kitchen</a>
        <a href="javascript:void(0)" data-id="MasterBedroom">Master Bedroom</a>
        <a href="javascript:void(0)" data-id="Bedroom2">Bedroom 2</a>
        <a href="javascript:void(0)" data-id="Bedroom3">Bedroom 3</a>
        <a href="javascript:void(0)" data-id="Bathroom">Bathroom</a>
        <a href="javascript:void(0)" data-id="Gym">Gym</a>
        <a href="javascript:void(0)" data-id="SwimmingPool">Swimming Pool</a>
      </div>
      <div class="row">
        <div class="LivingRoom Dimension-detail show-hide-detail" id="LivingRoom" style="display: block;"></div>
        <div class="LivingRoom Dimension-detail show-hide-detail" id="DiningRoom" style="display: none;"></div>
        <div class="LivingRoom Dimension-detail show-hide-detail" id="Kitchen" style="display: none;"></div>
        <div class="LivingRoom Dimension-detail show-hide-detail" id="MasterBedroom" style="display: none;"></div>
        <div class="LivingRoom Dimension-detail show-hide-detail" id="Bedroom2" style="display: none;"></div>
        <div class="LivingRoom Dimension-detail show-hide-detail" id="Bedroom3" style="display: none;"></div>
        <div class="LivingRoom Dimension-detail show-hide-detail" id="Bathroom" style="display: none;"></div>
        <div class="LivingRoom Dimension-detail show-hide-detail" id="SwimmingPool" style="display: none;"></div>
        </div>
      </div>
    </div>

</section>