Rumah hujung hadapan web tutorial js 解决移动端touchstart事件穿透问题方案

解决移动端touchstart事件穿透问题方案

Jul 20, 2017 pm 03:26 PM
soalan

【来源】:在开发移动端网站时,会经常徘徊在click和touchstart之间;因为touchstart虽然好用和快速响应;但是其缺点也是显而易见的,当我们大面积的使用touchstart的时候就会遇到,滚动页面的时候会频繁的触发,导致其不友好的体验;所以,不能单独的说哪个好与不好,而应该利用其长处,规避其缺点;

而且,对于a标签,在移动端的跳转方式,等同于click(经过自己实际体验)

【问题】在我们在上层触发touchstart的时候,下层的click或者a标签都会同时被触发(严格的讲是350ms之后触发)

【原理】是由于click的触发时间是500ms,而touchstart触发时间是350ms,由于500>350导致的用户出现了穿透问题

【解决办法】解决问题的办法有多重多样,换个角度换个方式,就有不同的答案;下面介绍几个我在实际中行之有效的方法,仅供参考:

  1. 可以把touchstart换成touchend,因为触发touchend需要200ms所以可以把触发时间这个原理问题解决掉(这个也是我经常使用的,处理点击问题)

  2. 大家也可以在触发下面一层覆盖上一层透明层,让其穿透到这个透明层,而不是有事件的那层(这种方法增加了层级,也增加的编码的复杂度)

Atas ialah kandungan terperinci 解决移动端touchstart事件穿透问题方案. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Selesaikan masalah 'ralat: definisi semula kelas 'Nama Kelas'' yang muncul dalam kod C++ Selesaikan masalah 'ralat: definisi semula kelas 'Nama Kelas'' yang muncul dalam kod C++ Aug 25, 2023 pm 06:01 PM

Selesaikan masalah "error:redefinitionofclass'ClassName'" dalam kod C++ Dalam pengaturcaraan C++, kita sering menghadapi pelbagai ralat kompilasi. Salah satu ralat biasa ialah "error:redefinitionofclass 'ClassName'" (ralat definisi semula kelas 'ClassName'). Ralat ini biasanya berlaku apabila kelas yang sama ditakrifkan beberapa kali. Artikel ini akan

Masalah penilaian kesan pengelompokan dalam algoritma pengelompokan Masalah penilaian kesan pengelompokan dalam algoritma pengelompokan Oct 10, 2023 pm 01:12 PM

Masalah penilaian kesan pengelompokan dalam algoritma pengelompokan memerlukan contoh kod khusus Pengelompokan ialah kaedah pembelajaran tanpa pengawasan yang mengelompokkan sampel yang serupa ke dalam satu kategori dengan mengelompokkan data. Dalam algoritma pengelompokan, cara menilai kesan pengelompokan adalah isu penting. Artikel ini akan memperkenalkan beberapa penunjuk penilaian kesan pengelompokan yang biasa digunakan dan memberikan contoh kod yang sepadan. 1. Indeks penilaian kesan pengelompokan Pekali Siluet Pekali siluet menilai kesan pengelompokan dengan mengira kehampiran sampel dan tahap pemisahan daripada kelompok lain.

Apakah yang perlu saya lakukan jika saya tidak boleh memuat turun Steam pada Windows 10? Apakah yang perlu saya lakukan jika saya tidak boleh memuat turun Steam pada Windows 10? Jul 07, 2023 pm 01:37 PM

Steam ialah platform permainan yang sangat popular dengan banyak permainan berkualiti tinggi, tetapi sesetengah pengguna win10 melaporkan bahawa mereka tidak boleh memuat turun wap Apa yang sedang berlaku? Kemungkinan besar alamat pelayan IPv4 pengguna tidak ditetapkan dengan betul. Untuk menyelesaikan masalah ini, anda boleh cuba memasang Steam dalam mod keserasian, dan kemudian mengubah suai pelayan DNS secara manual kepada 114.114.114.114, dan anda sepatutnya boleh memuat turunnya kemudian. Apa yang perlu dilakukan jika Win10 tidak dapat memuat turun Steam: Di bawah Win10, anda boleh cuba memasangnya dalam mod keserasian Selepas mengemas kini, anda mesti mematikan mod keserasian, jika tidak, halaman web tidak akan dimuatkan. Klik sifat pemasangan program untuk menjalankan program dalam mod keserasian. Mulakan semula untuk meningkatkan memori, kuasa

Selesaikan ralat PHP: masalah yang dihadapi semasa mewarisi kelas induk Selesaikan ralat PHP: masalah yang dihadapi semasa mewarisi kelas induk Aug 17, 2023 pm 01:33 PM

Menyelesaikan ralat PHP: Masalah yang dihadapi apabila mewarisi kelas induk Dalam PHP, pewarisan ialah ciri penting pengaturcaraan berorientasikan objek. Melalui pewarisan, kita boleh menggunakan semula kod sedia ada dan melanjutkan serta menambah baiknya tanpa mengubah suai kod asal. Walaupun warisan digunakan secara meluas dalam pembangunan, kadangkala anda mungkin menghadapi beberapa masalah ralat semasa mewarisi daripada kelas induk Artikel ini akan menumpukan pada menyelesaikan masalah biasa yang dihadapi apabila mewarisi daripada kelas induk dan memberikan contoh kod yang sepadan. Soalan 1: Kelas induk tidak ditemui Semasa proses mewarisi kelas induk, jika sistem tidak

Ajar anda cara mendiagnosis masalah iPhone biasa Ajar anda cara mendiagnosis masalah iPhone biasa Dec 03, 2023 am 08:15 AM

Dikenali dengan prestasi yang berkuasa dan ciri serba boleh, iPhone tidak terlepas daripada cegukan atau kesukaran teknikal sekali-sekala, ciri biasa di kalangan peranti elektronik yang kompleks. Mengalami masalah iPhone boleh mengecewakan, tetapi biasanya penggera tidak diperlukan. Dalam panduan komprehensif ini, kami menyasarkan untuk menyahmistifikasi beberapa cabaran yang paling biasa dihadapi yang berkaitan dengan penggunaan iPhone. Pendekatan langkah demi langkah kami direka untuk membantu anda menyelesaikan isu lazim ini, menyediakan penyelesaian praktikal dan petua penyelesaian masalah untuk mengembalikan peralatan anda dalam keadaan berfungsi terbaik. Sama ada anda menghadapi masalah atau isu yang lebih kompleks, artikel ini boleh membantu anda menyelesaikannya dengan berkesan. Petua Penyelesaian Masalah Umum Sebelum menyelidiki langkah penyelesaian masalah khusus, berikut adalah beberapa yang berguna

Bagaimana untuk menyelesaikan masalah yang jQuery tidak dapat memperoleh nilai elemen bentuk Bagaimana untuk menyelesaikan masalah yang jQuery tidak dapat memperoleh nilai elemen bentuk Feb 19, 2024 pm 02:01 PM

Untuk menyelesaikan masalah yang jQuery.val() tidak boleh digunakan, contoh kod khusus diperlukan Untuk pembangun bahagian hadapan, menggunakan jQuery ialah salah satu operasi biasa. Antaranya, menggunakan kaedah .val() untuk mendapatkan atau menetapkan nilai elemen borang adalah operasi yang sangat biasa. Walau bagaimanapun, dalam beberapa kes tertentu, masalah tidak dapat menggunakan kaedah .val() mungkin timbul. Artikel ini akan memperkenalkan beberapa situasi dan penyelesaian biasa, serta memberikan contoh kod khusus. Penerangan Masalah Apabila menggunakan jQuery untuk membangunkan halaman hadapan, kadangkala anda akan menghadapi

Masalah pemerolehan label dalam pembelajaran yang diselia dengan lemah Masalah pemerolehan label dalam pembelajaran yang diselia dengan lemah Oct 08, 2023 am 09:18 AM

Masalah pemerolehan label dalam pembelajaran yang diselia dengan lemah memerlukan contoh kod khusus Pengenalan: Pembelajaran diselia dengan lemah ialah kaedah pembelajaran mesin yang menggunakan label yang lemah untuk latihan. Berbeza daripada pembelajaran tradisional yang diselia, pembelajaran yang diselia dengan lemah hanya perlu menggunakan lebih sedikit label untuk melatih model, berbanding setiap sampel perlu mempunyai label yang tepat. Walau bagaimanapun, dalam pembelajaran yang diselia dengan lemah, cara mendapatkan maklumat berguna dengan tepat daripada label yang lemah adalah isu utama. Artikel ini akan memperkenalkan masalah pemerolehan label dalam pembelajaran yang diselia dengan lemah dan memberikan contoh kod khusus. Pengenalan kepada masalah pemerolehan label dalam pembelajaran yang diselia dengan lemah:

Bagaimana untuk menangani masalah beban pelayan yang kerap dalam sistem Linux Bagaimana untuk menangani masalah beban pelayan yang kerap dalam sistem Linux Jun 29, 2023 pm 11:56 PM

Cara menangani masalah beban pelayan yang kerap tinggi dalam sistem Linux Ringkasan: Artikel ini memperkenalkan cara menangani masalah beban pelayan yang kerap tinggi dalam sistem Linux. Dengan mengoptimumkan konfigurasi sistem, melaraskan peruntukan sumber perkhidmatan, mengesan proses masalah dan menjalankan penalaan prestasi, anda boleh mengurangkan beban dengan berkesan dan meningkatkan prestasi dan kestabilan pelayan. 1. Pengenalan Beban pelayan yang berlebihan adalah salah satu masalah biasa dalam sistem Linux, yang boleh menyebabkan pelayan berjalan perlahan, bertindak balas tidak pada masanya, atau malah gagal berfungsi dengan baik. Menghadapi masalah ini, saya

See all articles