jquery melarang mengklik pada tag untuk melompat

Dalam reka bentuk laman web, kami sering menggunakan hiperpautan (tag) untuk melaksanakan lompatan halaman. Walau bagaimanapun, dalam beberapa kes, kita perlu melarang tingkah laku lompat teg Contohnya, apabila menyerahkan borang, untuk mengelakkan kehilangan data yang disebabkan oleh lompatan secara tidak sengaja, atau dalam beberapa senario interaksi khas, pengguna perlu melakukan tertentu. operasi sebelum Buat lompatan. Dalam kes ini, kita boleh menggunakan jQuery untuk mengawal acara klik tag a untuk mencapai kesan melarang lompatan.

Sangat mudah untuk melumpuhkan lompatan teg dalam jQuery Anda hanya perlu menggunakan kaedah preventDefault() untuk menghalang tingkah laku lompat lalai. Pelaksanaan khusus adalah seperti berikut:

$('a').click(function (e) {
  e.preventDefault();
});

Dalam kod di atas, kami memilih semua teg melalui pemilih $('a'), dan kemudian menggunakan kaedah click() untuk mendaftarkan acara klik. Dalam pengendali acara, kami menggunakan kaedah e.preventDefault() untuk menghalang tingkah laku lompat lalai. Apabila pengguna mengklik pada teg, fungsi pemprosesan acara akan dilaksanakan serta-merta, sekali gus melarang tingkah laku lompat teg.

Jika kita hanya mahu melarang lompatan untuk teg tertentu, kita boleh menambah kelas tertentu untuk teg tersebut dan menggunakan kelas ini untuk memilih teg ini, contohnya:

$('.no-jump').click(function (e) {
  e.preventDefault();
});

Dalam kod di atas , kami menambahkan kelas bernama no-jump pada teg a yang perlu dilarang daripada melompat, dan kemudian menggunakan kelas ini untuk memilih teg a ini dan mendaftarkan acara klik. Apabila teg ini diklik, pengendali acara akan melaksanakan dan menghalang tingkah laku lompat lalai.

Selain menggunakan kaedah preventDefault(), kami juga boleh menggunakan return false untuk menghalang tingkah laku lompat lalai. Tetapi perlu diingat bahawa return false boleh menghalang tingkah laku lompat lalai dan mengelakkan acara menggelegak. Oleh itu, jika kita perlu menghalang gelagat lompat lalai dan acara menggelegak pada masa yang sama, kita boleh menggunakan kod berikut:

$('.no-jump').click(function (e) {
  e.stopPropagation();
  e.preventDefault();
  return false;
});

Dalam kod di atas, selain menggunakan kaedah preventDefault() untuk menghalang tingkah laku lompat lalai, kami juga menggunakan stopPropagation()Kaedah untuk mengelakkan acara menggelegak. Pada masa yang sama, kami menambah return false pada penghujung pengendali acara untuk memastikan tingkah laku lompat lalai dan menggelegak acara dihalang.

Secara umumnya, kaedah menggunakan jQuery untuk melarang tag daripada melompat adalah sangat mudah Anda hanya perlu menggunakan kaedah preventDefault() dalam fungsi pemprosesan acara. Sudah tentu, kita juga boleh memilih untuk menggunakan return false untuk mengelakkan gelagat lompat lalai dan acara menggelegak pada masa yang sama bergantung pada situasi tertentu. Sama ada cara, ia boleh memberikan kami kaedah interaksi yang lebih fleksibel dan pelbagai dalam reka bentuk tapak web.

Atas ialah kandungan terperinci jquery melarang mengklik pada tag untuk melompat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!