Bagaimanakah Kami Boleh Menghalang Kesan Leding Melekit pada Butang dalam Persekitaran Sentuhan?

Mengatasi Kesan Tuding Melekit pada Butang dalam Persekitaran Sentuhan

Apabila mereka bentuk antara muka pengguna dengan peranti sentuh dalam fikiran, menguruskan kesan tuding pada butang boleh menjadi cabaran. Tugasan yang kelihatan mudah ini menjadi rumit disebabkan oleh keadaan tuding berterusan yang berlaku pada skrin sentuh, di mana kesan tuding kekal diaktifkan selepas sentuhan, menghasilkan butang biru yang berterusan.

Penyelesaian Tidak Cekap

Walaupun penyelesaian wujud, seperti menambah kelas tanpa tuding pada sentuhan atau menggunakan kelas sentuh dengan documentElement, kaedah ini mempunyai kelemahan. Mereka boleh merendahkan prestasi dan gagal mengendalikan peranti dengan kedua-dua skrin sentuh dan keupayaan tetikus.

Penyelesaian Sukar

Penyelesaian yang ideal akan melibatkan mengalih keluar keadaan tuding semasa sentuhan, tetapi manipulasi langsung keadaan hover nampaknya sukar difahami. Memfokus pada tempat lain gagal untuk mengalih keluar kesan tuding, dan tindakan manual mengetik elemen lain nampaknya menyahaktifkannya, namun pencetus terprogram tindakan ini kekal sebagai misteri.

Satu Terobosan

Ketibaan Pertanyaan Media CSS Tahap 4 pada tahun 2018 membawa penyelesaian revolusioner kepada dilema ini:

@media (hover: hover) {
    button:hover {
        background-color: blue;
    }
}

Pengisytiharan ini pada asasnya menyatakan: "Jika penyemak imbas menyokong pelekapan sebenar (cth., peranti input seperti tetikus ), gunakan gaya tuding apabila butang dituding ke atas."

Untuk penyemak imbas yang kekurangan ciri ini, poliisi boleh membantu. Dengan menggunakan polyfill ini, CSS futuristik di atas boleh diubah menjadi:

html.my-true-hover button:hover {
    background-color: blue;
}

JavaScript sisi pelanggan daripada polyfill kemudian mengesan sokongan tuding dan menogol kehadiran kelas my-true-hover dengan sewajarnya, memberikan yang elegan penyelesaian kepada kesan tuding melekit pada peranti sentuh.

Atas ialah kandungan terperinci Bagaimanakah Kami Boleh Menghalang Kesan Leding Melekit pada Butang dalam Persekitaran Sentuhan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!