Gunakan topeng DIV untuk menyelesaikan masalah kotak pilihan tidak sah yang dipilih terus oleh tetikus_HTML/Xhtml_Pengeluaran halaman web

Semasa proses pembangunan bahagian hadapan, saya menghadapi situasi yang memerlukan pemeriksaan Untuk kemudahan operasi pengguna, acara klik diletakkan pada DIV. (Knockout.js digunakan)

Kod ini kira-kira seperti berikut:

Salin kod

kod adalah seperti berikut:

<div id="one" data-biind="click:clickevent">
<input type="checkbox"><span> Sila semak saya jika anda mempunyai sebarang soalan&lt ;/span>
</div>

Tetapi terdapat fenomena aneh apabila menulis seperti ini.

Tetapi bukan perkara biasa untuk menanda kotak semak secara langsung dengan tetikus:

Kotak pilihan berada dalam keadaan tidak ditanda dan tetikus mengklik terus kotak semak untuk menyemak pada masa ini, perkara berikut harus dicapai: 1. Laksanakan acara clickevent div 2. , selepas acara dilaksanakan, kotak semak berada dalam keadaan yang ditandai.

Tetapi keputusan akhir ialah kotak pilihan masih tidak ditanda.

Hasil penjejakan dan penyahpepijatan ialah apabila acara clickevent dilaksanakan, kotak semak masih dalam keadaan yang ditandai, tetapi selepas clickevent dilaksanakan, pelaksanaan kod jquery dimasukkan Selepas dua atau tiga langkah, kotak semak ditukar kepada keadaan Tidak dipilih.

Sebabnya masih belum ditemui. (Kotak radio yang digunakan di tempat lain mempunyai situasi yang sama)

Tiada cara lain selain mengatasinya dengan menutup kotak pilihan dengan lapisan div, supaya apabila tetikus mengklik, div diklik bukannya kotak semak. Melalui clickevent Tukar status kotak semak (terdapat kod untuk menukar status kotak semak dalam acara clickevent)

dilaksanakan seperti berikut:

Salin kod

Kod adalah seperti berikut:

<div id="one">
<div id="two " data-bind="click:clickevent">< /div>
<div id="three">
<input type="checkbox"/> <span>Sila tandakan saya jika anda mempunyai sebarang soalan</span>
</div&gt ;
</div> tetapkan dua atribut: position:absolute; z-index:1;

Atribut z-index bagi div pada lapisan atas adalah lebih besar daripada div pada lapisan bawah.

Atribut ID DIV di atas hanyalah untuk ilustrasi Dalam program umum, atribut kelas digunakan untuk menetapkannya.