JavaScript menghalang lompatan penghalaan

Dalam pembangunan web, lompat laluan adalah operasi yang sangat biasa Apabila pengguna mengklik pautan atau menyerahkan borang, halaman itu akan melompat ke halaman lain. Tetapi kadangkala kami mahu dapat mengawal lompatan apabila pengguna mengklik pautan atau menyerahkan borang, seperti mengesahkan kesahihan data borang, atau menghalang kehilangan data akibat salah operasi pengguna. Dalam kes ini, kita perlu menggunakan JavaScript untuk mengelakkan lompatan penghalaan.

1. Cegah pautan melompat

Apabila pengguna mengklik pautan, penyemak imbas akan melompat ke halaman yang sepadan secara lalai. Tetapi jika kita ingin melakukan beberapa pemprosesan sebelum melompat apabila pengguna mengklik pada pautan, kita perlu menghalang tingkah laku lompat lalai. Kami boleh mencapai fungsi ini dengan menambahkan beberapa kod JavaScript dalam acara onclick pautan.

Sebagai contoh, berikut ialah pautan:

<a href="http://www.example.com" onclick="return false;">点击我不会跳转</a>

Dengan menambahkan "return false;" dalam acara onclick, anda boleh menghalang gelagat lompat lalai pautan.

Selain menggunakan "return false;", anda juga boleh menggunakan kaedah event.preventDefault() untuk menghalang gelagat lompat lalai. Contohnya:

<a href="http://www.example.com" onclick="event.preventDefault();">点击我不会跳转</a>

2. Halang penyerahan borang

Apabila pengguna menyerahkan borang, penyemak imbas akan menghantar data borang ke pelayan dan melompat ke halaman yang dikembalikan oleh pelayan. Begitu juga, kami juga boleh memproses borang sebelum ia diserahkan dan menghalang tingkah laku lompat lalai. Kita boleh mencapai kefungsian ini dengan menambahkan beberapa kod JavaScript dalam acara penyerahan borang.

Sebagai contoh, berikut ialah borang:

<form onsubmit="return false;">
  <input type="text" name="username">
  <input type="password" name="password">
  <button type="submit">提交</button>
</form>

Anda boleh menghalang gelagat penyerahan lalai borang dengan menambahkan "return false;" pada acara onsubmit.

Begitu juga, anda juga boleh menggunakan kaedah event.preventDefault() untuk menghalang gelagat penyerahan lalai. Contohnya:

<form>
  <input type="text" name="username">
  <input type="password" name="password">
  <button type="submit" onclick="event.preventDefault();">提交</button>
</form>

3. Halang lompatan laluan

Selain menghalang gelagat lompat lalai pada pautan dan borang, kami juga boleh menghalang lompat laluan melalui JavaScript. Dalam penyemak imbas, kita boleh mendapatkan URL halaman semasa melalui atribut lokasi objek tetingkap dan mengubah suainya untuk melompat.

Sebagai contoh, kita boleh menukar URL halaman semasa kepada URL halaman lain untuk mencapai lompatan laluan:

window.location.href = "http://www.example.com";

Jika kita ingin memproses sebelum lompatan, seperti data borang Untuk pengesahan, penghakiman bersyarat boleh ditambahkan pada kod.

Contohnya, berikut ialah borang:

<form>
  <input type="text" name="username">
  <input type="password" name="password">
  <button type="button" onclick="checkForm()">提交</button>
</form>

Panggil fungsi checkForm() dalam acara onclick Data borang boleh disahkan dalam fungsi ini Jika pengesahan gagal, tiada lompatan akan dilaksanakan.

function checkForm() {
  // 表单数据验证
  if (验证失败) {
    return;
  }
  window.location.href = "http://www.example.com";
}

Ringkasan

Dalam pembangunan web, mencegah lompatan laluan adalah operasi yang sangat biasa. Kami boleh melaksanakan fungsi ini dalam pautan, borang dan kod melalui JavaScript. Dengan menghalang lompatan laluan, kami boleh melakukan beberapa pemprosesan atau semakan selepas pengguna mengklik pautan atau menyerahkan borang untuk mengelakkan kehilangan data atau isu keselamatan yang disebabkan oleh salah operasi pengguna.

Atas ialah kandungan terperinci JavaScript menghalang lompatan penghalaan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!