javascript melumpuhkan sentuhan

JavaScript adalah dilarang

Dengan populariti peranti mudah alih, semakin banyak tapak web dan aplikasi mula menumpukan pada pengalaman mudah alih. Dalam kes ini, teknologi skrin sentuh digunakan secara meluas. Walau bagaimanapun, dalam beberapa kes, kami perlu melumpuhkan sentuhan untuk memastikan tapak web atau aplikasi berfungsi dengan baik. Artikel ini menerangkan cara untuk melumpuhkan sentuhan menggunakan JavaScript.

Apakah itu sentuhan?

Pada peranti mudah alih, kami biasanya menyentuh skrin dengan jari kami untuk beroperasi, yang dipanggil sentuh. Sentuhan datang dalam pelbagai bentuk, termasuk ketik satu jari, leret, cubitan dan banyak lagi. Dalam pembangunan web, kami boleh menggunakan CSS dan JavaScript untuk mengendalikan acara sentuhan.

Mengapa anda perlu melumpuhkan sentuhan?

Dalam sesetengah kes, kami perlu melumpuhkan sentuhan untuk memastikan tapak web atau aplikasi berfungsi dengan baik. Berikut ialah beberapa situasi biasa:

1. Konflik interaksi elemen

Apabila terdapat berbilang elemen interaktif pada halaman (seperti butang, pautan, galeri, dll.), mereka Konflik mungkin berlaku. Sebagai contoh, pengguna mungkin secara tidak sengaja mengklik butang dan bukannya berniat untuk mengklik pautan lain. Dalam kes ini kita perlu melumpuhkan sentuhan untuk mengelakkan situasi ini.

2. Elakkan salah operasi

Pengguna mungkin secara tidak sengaja menyentuh beberapa kawasan sensitif, seperti butang padam, butang tetapan, dsb. Untuk mengelakkan salah operasi ini, kita perlu melumpuhkan sentuhan.

3. Meningkatkan prestasi

Dalam sesetengah kes, melumpuhkan sentuhan boleh meningkatkan prestasi. Sebagai contoh, apabila kita mempunyai galeri atau meja yang sangat besar, meleret boleh menyebabkan halaman menjadi gagap atau ranap. Dalam kes ini, melumpuhkan sentuhan boleh membantu kami menjadikan halaman lebih responsif.

Bagaimana untuk melumpuhkan sentuhan?

Dalam JavaScript, kami boleh melumpuhkan sentuhan menggunakan:

1. Menggunakan CSS

Kami boleh melumpuhkan sentuhan menggunakan sifat tindakan sentuh CSS . Atribut ini mempunyai pilihan berikut:

• auto: Penyemak imbas boleh mengendalikan acara sentuhan dengan bebas.
• tiada: Penyemak imbas tidak mengendalikan acara sentuhan.
• pan-x: Benarkan pergerakan mendatar.
• pan-y: membenarkan pergerakan menegak.
• Manipulasi: Sokongan untuk mengezum dan menyorot dengan sentuhan dua jari.

Kod berikut boleh melumpuhkan acara sentuh untuk keseluruhan halaman:

body {
    touch-action: none;
}

Jika anda hanya mahu melumpuhkan acara sentuh untuk elemen tertentu, anda boleh lakukan seperti berikut:

.el {
    touch-action: none;
}

2. Menggunakan JavaScript

Jika anda memerlukan lebih kawalan, kami boleh menggunakan JavaScript untuk melumpuhkan sentuhan. Kod berikut boleh melumpuhkan acara sentuh untuk keseluruhan halaman:

document.addEventListener('touchstart', function(e) {
    e.preventDefault();  // 阻止默认事件
}, { passive: false });
document.addEventListener('touchmove', function(e) {
    e.preventDefault();  // 阻止默认事件
}, { passive: false });
document.addEventListener('touchend', function(e) {
    e.preventDefault();  // 阻止默认事件
}, { passive: false });

Jika anda hanya mahu melumpuhkan acara sentuh untuk elemen tertentu, anda boleh melakukannya seperti ini:

var el = document.getElementById('el');
el.addEventListener('touchstart', function(e) {
    e.preventDefault();  // 阻止默认事件
}, { passive: false });
el.addEventListener('touchmove', function(e) {
    e.preventDefault();  // 阻止默认事件
}, { passive: false });
el.addEventListener('touchend', function(e) {
    e.preventDefault();  // 阻止默认事件
}, { passive: false });

Dalam kod di atas , kami menggunakan kaedah preventDefault() untuk menghalang gelagat lalai peristiwa sentuhan, dengan itu melumpuhkan sentuhan.

Perhatikan bahawa kami memberikan { pasif: false } sebagai pilihan kepada pendengar acara untuk memastikan kaedah preventDefault() berkuat kuasa. Jika pilihan ini tidak ditetapkan, kaedah preventDefault() mungkin tidak berfungsi, menghalang sentuhan daripada dilumpuhkan.

Ringkasan

Artikel ini menerangkan cara untuk melumpuhkan sentuhan menggunakan JavaScript. Kami boleh melumpuhkan sentuhan menggunakan CSS atau JavaScript, bergantung pada keperluan kami. Sama ada cara, setiap senario pelumpuhan sentuhan harus dipertimbangkan dengan teliti untuk memastikan tapak web atau aplikasi berfungsi dengan baik.

Atas ialah kandungan terperinci javascript melumpuhkan sentuhan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!