Pengantar Penggunaan Gerakan Lanjutan di JavaScript

Komentar: Dukungan pengakuan yang baru ditambahkan untuk input pengguna tingkat lanjut di IE10, berikan contoh: Daftarkan operasi klik, dan Anda dapat mengetahui perangkat mana klik pengguna saat ini, apakah itu klik jari, klik mouse atau klik stylus (perangkat tablet akan memiliki stylus)

IE10 Dukungan pengakuan yang baru ditambahkan untuk input pengguna tingkat lanjut, misalnya: Daftarkan operasi klik, dan melalui kalimat AddEventListener, Anda dapat mengetahui perangkat mana klik pengguna saat ini, klik jari, klik mouse atau klik stylus (perangkat tablet akan memiliki stylus).

Kode di atas dapat mengidentifikasi perangkat mana klik pengguna saat ini, dan juga membuat penilaian melalui metode callback e.pointertype. Tikus adalah 4, stylus adalah 3, dan jari adalah 2. Mengenai jenis peralatan apa yang merupakan nilai 1, masih harus dipelajari.

Hal lain yang perlu diperhatikan adalah bahwa Anda ingin menambahkan identifikasi perangkat input di JavaScript, dan peristiwa metode pendaftaran juga sedikit berbeda.

addeventlistener acara yang ditambahkan adalah mspointerdown

Di IE10, klik jari yang lebih disukai sebagai pengakuan atas berbagai perangkat tersebut tidak terpengaruh oleh klik fungsi normal. Namun, IE10 tidak hanya mengenali perangkat input pengguna tetapi juga mendukung banyak gerakan canggih.

Berikut ini adalah demonstrasi dukungan isyarat lanjutan IE10

Buat objek Gesture

Langkah pertama dalam menangani gerakan di situs web Anda adalah untuk membuat instantiate objek Gesture.

var mygesture = msesturture baru ();

Selanjutnya, berikan elemen target untuk gerakan tersebut. Browser akan memicu acara gerakan untuk elemen ini. Pada saat yang sama, elemen ini juga dapat menentukan ruang koordinat acara.

elm = document.geteLementById (someElement);

mygesture.target = elm;

elm.addeventlistener (msestureChange, handlegesture);

Akhirnya, beri tahu objek Gesture mana yang akan diproses selama pengakuan gerakan.

elm.addeventlistener (mspointerdown, function (evt) {

// menambahkan mouse, pena, atau kontak sentuh saat ini untuk pengenalan gesture

mygesture.addpointer (evt.pointerid);

});

Catatan: Jangan lupa bahwa Anda perlu menggunakan-MS-Touch-action untuk mengonfigurasi elemen untuk mencegahnya melakukan tindakan sentuhan default (misalnya, PAN dan ZOOM), dan menyediakan acara pointer untuk input.

Setelah objek Gesture memiliki target yang valid dan memiliki setidaknya satu penunjuk yang ditambahkan, itu akan mulai memicu acara Gesture. Peristiwa gerakan dapat dibagi menjadi dua jenis: gerakan statis (mis., Klik atau tahan) dan gerakan dinamis (mis., Kecilkan, putar, dan gesek).

Pengakuan gerakan paling mendasar adalah klik. Ketika sebuah klik terdeteksi, acara MsesturEtap akan dipicu pada elemen target objek Gesture. Tidak seperti klik peristiwa, klik gerakan hanya dapat dipicu ketika pengguna menyentuh, menekan tombol mouse, atau menggunakan stylus untuk disentuh tanpa bergerak. Ini biasanya sangat berguna jika Anda ingin membedakan antara klik pengguna dan elemen seret.

Gerakan tekan panjang mengacu pada pengoperasian pengguna yang menyentuh layar dengan satu jari dan memegangnya sejenak dan mengangkatnya tanpa memindahkannya. Selama interaksi pers panjang, acara MsestureHold akan dipecat beberapa kali untuk berbagai keadaan isyarat:

element.addeventListener ("msestureHold", clewehold);

function handehold (evt) {

if (evt.detail & evt.msgesture_flag_begin) {

// Mulai sinyal awal gerakan. Untuk gerakan penahan, ini berarti pengguna telah bertahan cukup lama di tempat sehingga gerakan itu akan menjadi pers & tahan total jika jari diangkat.

}

if (evt.detail & evt.msgesture_flag_end) {

// Akhiri menandakan akhir dari gerakan.

}

if (evt.detail & evt.msgesture_flag_cancel) {

// Batalkan Sinyal Pengguna memulai gerakan tetapi membatalkannya. Untuk ditahan, ini terjadi ketika pengguna menyeret pergi sebelum diangkat. Bendera ini dikirim bersama dengan bendera akhir, menandakan pengenalan gerakan selesai.

}

}

Gerakan dinamis (kontraksi, rotasi, gesek dan seret)

Gerakan dinamis (misalnya, menyusut atau berputar) akan dilaporkan dalam bentuk transformasi, yang sangat mirip dengan transformasi CSS 2D. Gerakan dinamis dapat memicu tiga peristiwa: msesturestart, msesturechange (pemicu berulang saat gerakan berlanjut), dan msestureend. Setiap acara berisi informasi tentang penskalaan (menyusut), rotasi, konversi, dan kecepatan.

Karena gerakan dinamis dilaporkan dalam konversi, akan sangat mudah untuk menggunakan msgesture dengan konversi CSS 2D untuk memanipulasi elemen seperti foto atau teka -teki. Misalnya, Anda dapat mengaktifkan elemen penskalaan, putar, dan seret dengan cara -cara berikut:

TargetElement.addeventListener ("msestureChange", manipulateElement);

fungsi manipulateElement (e) {

// BINTIK Kode berikut jika Anda ingin menonaktifkan inersia bawaan yang disediakan oleh pengakuan gerakan dinamis

// if (e.detail == e.msgesture_flag_inertia)

// kembali;

var m = mscssmatrix baru (e.target.style.transform); // Dapatkan transformasi CSS terbaru pada elemen

e.target.style.transform = m

. Translate (E.Offsetx, E.Offsety) // Pindahkan asal transformasi di bawah pusat gerakan

.Rotate (E.Rotation * 180 / Math.pi) // Terapkan rotasi

.Scale (E.Scale) // Skala Terapkan

.translate (e.translationx, e.translationy) // Terapkan terjemahan

.translate (-e.offsetx, -e.offsety); // pindahkan transform asal kembali

}

Gerakan dinamis seperti zooming dan rotasi dapat mendukung operasi mouse, yang dapat dicapai dengan menggunakan Ctrl atau shift pengubah masing -masing saat memutar roda mouse.