Bagaimana untuk menghalang tag daripada melompat dalam javascript

Dalam pembangunan Web, teg adalah teg yang sangat biasa Ia digunakan untuk menentukan pautan Apabila pengguna mengklik pautan, penyemak imbas akan melompat ke alamat yang ditentukan oleh pautan. Tetapi dalam beberapa kes, kami tidak perlu melompat ke halaman baharu Contohnya, dalam aplikasi satu halaman, kami hanya mahu mengemas kini kandungan halaman melalui JavaScript. Pada masa ini, kita boleh menggunakan beberapa atribut teg untuk menghalang gelagat lalainya dan melaksanakan operasi tersuai.

1 Halang teg daripada melompat

Dalam teg, anda boleh menggunakan ungkapan void (0) JavaScript sebagai nilai atribut href untuk menghalang kelakuan lalai teg . Contohnya:

<a href="javascript:void(0)">点击这里</a>

Apabila pengguna mengklik pautan ini, penyemak imbas tidak akan melompat. Walau bagaimanapun, perlu diingatkan bahawa walaupun kaedah ini boleh menghalang kelakuan lalai, ia tidak akan menghalang penghantaran acara Maksudnya, selepas mengklik pautan ini, acara klik masih akan dihantar ke elemen induk untuk mengelakkan acara daripada dihantar, anda perlu Menambah kod event.stopPropagation() pada fungsi pengendalian acara, contohnya:

<div id="parent">
  <a href="javascript:void(0)" onClick="event.stopPropagation()">点击这里</a>
</div>

Apabila pengguna mengklik pada pautan ini, bukan sahaja lompatan tidak akan berlaku , tetapi acara itu tidak akan diserahkan kepada elemen induk.

2. Sesuaikan acara klik

Dalam teg, selain menggunakan void(0) untuk menghalang tingkah laku lalai, anda juga boleh menggunakan kod JavaScript untuk menyesuaikan acara klik. Contohnya:

<a href="#" onClick="alert(&#39;这是一个自定义点击事件&#39;)">点击这里</a>

Nilai atribut href di sini ialah '#' Apabila pengguna mengklik pada pautan ini, ia akan melompat ke bahagian atas halaman semasa (kerana '#' mewakili titik utama dalam. halaman) , tetapi disebabkan kenyataan amaran dalam fungsi pengendalian acara onClick, kotak gesaan akan dipaparkan untuk memberitahu pengguna bahawa ini ialah acara klik tersuai.

Kelebihan kaedah ini ialah anda boleh mengendalikan kod JavaScript dalam acara klik tanpa menyekat penghantaran acara atau menghalang kelakuan lalai, kerana kaedah ini mula-mula akan melaksanakan fungsi pemprosesan acara, dan kemudian Lakukan lalai tingkah laku. Tetapi kelemahannya ialah jika anda perlu menentukan berbilang peristiwa klik tersuai, kod akan menjadi kembung. Dan kaedah ini tidak boleh menghalang berbilang peristiwa klik daripada dicetuskan.

3. Gunakan pendengar acara

Untuk menyelesaikan masalah di atas, anda boleh menggunakan kaedah addEventListener() pendengar acara untuk mengikat acara tersuai pada teg. Contohnya:

<a href="#" id="myLink">点击这里</a>

document.querySelector('#myLink').addEventListener('click', function() {
  alert('这是一个自定义点击事件');
});

Kaedah ini boleh memisahkan acara tersuai daripada teg, sambil menghalang gelagat lalai dan penghantaran acara. Dan kaedah ini juga boleh menyelesaikan masalah pencetus acara berbilang klik, kerana setiap klik hanya akan melaksanakan acara tersuai sekali. Selain itu, pendengar acara juga boleh digunakan untuk menghantar parameter untuk acara tersuai untuk mencapai operasi yang lebih fleksibel.

4 Ringkasan

Dalam pembangunan web, teg ialah teg yang sangat biasa, tetapi dalam beberapa kes, kami tidak memerlukan gelagat lalainya atau kami ingin menambahkan lebih banyak maklumat pada acara klik. Berbilang kod JavaScript. Pada masa ini, kami boleh menggunakan beberapa atribut teg dan kod JavaScript untuk mentakrifkan operasi kami sendiri. Walau bagaimanapun, perlu diingatkan bahawa kaedah ini mesti mempertimbangkan cara untuk menghalang tingkah laku lalai dan penghantaran acara, dan cara menyelesaikan masalah mencetuskan berbilang peristiwa klik. Apabila menggunakan kaedah di atas, anda perlu memilih kaedah yang paling sesuai dengan anda mengikut situasi sebenar.

Atas ialah kandungan terperinci Bagaimana untuk menghalang tag daripada melompat dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!