Analisis acara JavaScript dalam kemahiran skrin sentuh_javascript

Contoh dalam artikel ini menerangkan peristiwa JavaScript dalam skrin sentuh. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

1. Acara sentuh

ontouchstart
ontouchmove
ontouchend
ontouchcancel Pada masa ini, semua pelayar mudah alih menyokong empat acara sentuhan ini, termasuk IE. Memandangkan skrin sentuh turut menyokong MouseEvent, pesanannya perlu diberi perhatian: touchstart → mouseover → mousemove → mousedown → mouseup → click1

Contohnya adalah seperti berikut:

/**
* onTouchEvent
*/
var div = document.getElementById("div");
//touchstart类似mousedown
div.ontouchstart = function(e){
//事件的touches属性是一个数组，其中一个元素代表同一时刻的一个触控点，
//从而可以通过touches获取多点触控的每个触控点
//由于我们只有一点触控，所以直接指向[0]
var touch = e.touches[0];
//获取当前触控点的坐标，等同于MouseEvent事件的clientX/clientY
var x = touch.clientX;
var y = touch.clientY;
};
//touchmove类似mousemove
div.ontouchmove = function(e){
//可为touchstart、touchmove事件加上preventDefault从而阻止触摸时，
//浏览器的缩放、滚动条滚动等
e.preventDefault();
};
//touchend类似mouseup
div.ontouchup = function(e){
//nothing to do
};

2. Peristiwa gerak isyarat Gerak isyarat merujuk kepada penggunaan berbilang sentuhan untuk melakukan operasi seperti putaran dan regangan, seperti pembesaran dan putaran gambar dan halaman web. Peristiwa gerak isyarat dicetuskan hanya apabila dua atau lebih jari menyentuh pada masa yang sama. Satu perkara yang perlu kita perhatikan tentang penskalaan ialah koordinat kedudukan elemen: kita biasanya menggunakan offsetX, getBoundingClientRect dan kaedah lain untuk mendapatkan koordinat kedudukan elemen Walau bagaimanapun, dalam penyemak imbas mudah alih, halaman sering diskalakan semasa digunakan, dan koordinat elemen berskala akan berubah ? Jawapannya ialah ia berbeza-beza. Mari kita gunakan senario untuk menggambarkan masalah ini: Selepas halaman A dimuatkan, JavaScript memperoleh koordinat elemen dalam dokumen sebagai (100,100), dan kemudian pengguna mengezum masuk pada halaman Pada masa ini, JavaScript digunakan untuk mengeluarkan koordinat elemen sekali lagi, iaitu masih (100,100 Walau bagaimanapun, kawasan responsif elemen pada skrin akan diimbangi berdasarkan penskalaan). Anda boleh membuka demo permainan Arkanoid, tunggu sehingga halaman dimuatkan sepenuhnya, dan kemudian zum masuk. Pada masa ini, anda akan mendapati bahawa walaupun jari anda menyentuh di luar kawasan "sentuh di sini", anda masih boleh mengawal papan bola kerana kawasan itu diimbangi. Offset akan berterusan melainkan halaman dimuat semula atau penskalaan disambung semula.

/**
* onGestureEvent
*/
var div = document.getElementById("div");
div.ongesturechange = function(e){
//scale代表手势产生的缩放比例，小于1是缩小，大于1是放大，原始为1
var scale = e.scale;
//rotation代表旋转手势的角度，值区间[0,360]，正值顺时针旋转，负值逆时针
var angle = e.rotation;
};

3. Penderiaan graviti Penderiaan graviti adalah agak mudah Anda hanya perlu menambah peristiwa perubahan orientasi pada nod badan. Dalam acara ini, nilai yang mewakili orientasi telefon mudah alih semasa diperoleh daripada sifat window.orientation. Senarai nilai window.orientation adalah seperti berikut:

0: Arah yang sama seperti semasa halaman pertama kali dimuatkan
-90: Diputar 90° mengikut arah jam berbanding arah asal
180: pusing 180°
90: Berpusing 90° lawan jam Menurut ujian saya, Android 2.1 belum lagi menyokong pengesanan graviti. Di atas ialah peristiwa skrin sentuh semasa Peristiwa ini belum lagi dimasukkan ke dalam standard, tetapi ia digunakan secara meluas. Saya mempunyai Android 2.1 dan belum mengujinya dalam persekitaran lain.

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.