Bagaimanakah Kami Boleh Menghalang Kesan Tuding Melekit pada Butang untuk Peranti Sentuh?

Menghalang Kesan Tuding Melekit pada Peranti Sentuh untuk Butang

Apabila mencipta antara muka pengguna untuk kedua-dua desktop dan peranti yang didayakan sentuhan, adalah penting untuk menangani isu kesan hover melekit pada butang. Pada peranti sentuh, keadaan tuding, yang biasanya ditunjukkan dengan menukar warna latar belakang elemen, boleh tersekat, walaupun selepas butang telah dilepaskan.

Penyelesaian untuk Mencegah Kesan Tuding Melekit

Beberapa penyelesaian telah dicadangkan untuk menangani perkara ini isu:

• Mengalih keluar kelas tuding: Walaupun kaedah ini mudah, ia boleh menjadi tidak cekap dan mungkin tidak berfungsi dengan baik pada peranti yang menyokong input sentuhan dan tetikus.
• Menambah kelas sentuh: Teknik ini juga mempunyai had, kerana ia tidak mengambil kira peranti dengan input bercampur kaedah.

Penyelesaian Pilihan

Penyelesaian yang ideal adalah untuk mengalih keluar keadaan tuding pada sentuhan. Walau bagaimanapun, ini nampaknya tidak dapat dicapai melalui kaedah konvensional seperti memfokuskan elemen lain atau mencetuskan pengetikan manual dalam JavaScript.

Penyelesaian Pertanyaan Media Tahap 4

Walau bagaimanapun, dengan pelaksanaan CSS yang meluas Pertanyaan Media Tahap 4 sejak 2018, terdapat penyelesaian yang lebih elegan tersedia:

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

Peraturan CSS ini menyatakan bahawa apabila penyemak imbas menyokong tudingan sebenar (biasanya menunjukkan penggunaan peranti input utama seperti tetikus), gaya tuding akan digunakan pada butang. Ini berkesan menghalang kesan tuding pada peranti yang didayakan sentuhan.

Polyfill untuk Penyemak Imbas Warisan

Untuk penyemak imbas yang tidak menyokong CSS Media Query Level 4, polyfill boleh digunakan untuk melaksanakan penyelesaian yang serupa:

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

Kod JavaScript daripada polyfill kemudiannya boleh menogol kelas my-true-hover berdasarkan sokongan tuding:

$(document).on('mq4hsChange', function (e) {
    $(document.documentElement).toggleClass('my-true-hover', e.trueHover);
});

Dengan menggunakan penyelesaian ini, pembangun boleh memastikan bahawa butang mempunyai kesan tuding yang sesuai pada penyemak imbas desktop sambil menghalang kesan tuding melekit pada peranti yang didayakan sentuhan.

Atas ialah kandungan terperinci Bagaimanakah Kami Boleh Menghalang Kesan Tuding Melekit pada Butang untuk Peranti Sentuh?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!