ความคิดเห็น: การสนับสนุนการรับรู้ที่เพิ่มขึ้นใหม่สำหรับการป้อนข้อมูลผู้ใช้ขั้นสูงใน IE10 ให้ตัวอย่าง: ลงทะเบียนการดำเนินการคลิกและคุณสามารถรู้ได้
IE10 ที่เพิ่มการสนับสนุนการรับรู้ใหม่สำหรับการป้อนข้อมูลผู้ใช้ขั้นสูงเช่น: ลงทะเบียนการดำเนินการคลิกและผ่านประโยค AddEventListener คุณสามารถรู้ได้ว่าอุปกรณ์ใดที่การคลิกของผู้ใช้ปัจจุบันคือการคลิกนิ้วคลิกเมาส์หรือสไตลัสคลิก (อุปกรณ์แท็บเล็ตจะมีสไตลัส)
รหัสข้างต้นสามารถระบุได้ว่าอุปกรณ์ใดที่การคลิกของผู้ใช้ปัจจุบันคือและยังทำการตัดสินด้วยวิธีการโทรกลับ E.PointerType เมาส์คือ 4 สไตลัสคือ 3 และนิ้วคือ 2 สำหรับอุปกรณ์ประเภทใดที่มีค่า 1 มันยังคงต้องศึกษา
อีกสิ่งที่ควรทราบคือคุณต้องการเพิ่มการระบุอุปกรณ์อินพุตใน JavaScript และเหตุการณ์วิธีการลงทะเบียนก็แตกต่างกันเล็กน้อย
addeventListener เหตุการณ์ที่เพิ่มขึ้นคือ mspointerdown
ใน IE10 การคลิกนิ้วที่ต้องการในการรับรู้ของอุปกรณ์ต่าง ๆ ดังกล่าวจะไม่ได้รับผลกระทบจากการคลิกฟังก์ชั่นปกติ อย่างไรก็ตาม IE10 ไม่เพียง แต่รับรู้อุปกรณ์อินพุตของผู้ใช้ แต่ยังรองรับท่าทางขั้นสูงจำนวนมาก
ต่อไปนี้เป็นการสาธิตการสนับสนุนท่าทางขั้นสูงของ IE10
สร้างวัตถุท่าทาง
ขั้นตอนแรกในการจัดการท่าทางในเว็บไซต์ของคุณคือการยกตัวอย่างวัตถุท่าทาง
var mysterure = new msgesture ();
ถัดไปให้องค์ประกอบเป้าหมายสำหรับท่าทาง เบราว์เซอร์จะกระตุ้นเหตุการณ์ท่าทางสำหรับองค์ประกอบนี้ ในเวลาเดียวกันองค์ประกอบนี้ยังสามารถกำหนดพื้นที่พิกัดของเหตุการณ์ได้
elm = document.getElementById (บางส่วน);
MySture.target = Elm;
Elm.addeventListener (Msgesturechange, Handlegerture);
ในที่สุดบอกวัตถุท่าทางที่ชี้ไปที่การประมวลผลระหว่างการรับรู้ด้วยท่าทาง
Elm.addeventListener (mspointerdown, function (evt) {
// เพิ่มเมาส์ปากกาหรือสัมผัสปัจจุบันเพื่อรับรู้ด้วยท่าทาง
mysterure.addpointer (evt.pointerid);
-
หมายเหตุ: อย่าลืมว่าคุณต้องใช้-MS-Touch-Action เพื่อกำหนดค่าองค์ประกอบเพื่อป้องกันไม่ให้พวกเขาดำเนินการสัมผัสแบบสัมผัสเริ่มต้น (ตัวอย่างเช่น PAN และ ZOOM) และจัดเตรียมเหตุการณ์ตัวชี้สำหรับอินพุต
จัดการกับเหตุการณ์ท่าทางเมื่อวัตถุท่าทางมีเป้าหมายที่ถูกต้องและมีการเพิ่มตัวชี้อย่างน้อยหนึ่งตัวมันจะเริ่มทริกเกอร์เหตุการณ์ท่าทาง เหตุการณ์ท่าทางสามารถแบ่งออกเป็นสองประเภท: ท่าทางคงที่ (เช่นคลิกหรือถือ) และท่าทางแบบไดนามิก (เช่นหดตัวหมุนและปัด)
คลิกการจดจำท่าทางพื้นฐานที่สุดคือการคลิก เมื่อตรวจพบการคลิกเหตุการณ์ msestureTap จะถูกเรียกใช้กับองค์ประกอบเป้าหมายของวัตถุท่าทาง ซึ่งแตกต่างจากเหตุการณ์การคลิกการคลิกท่าทางสามารถเรียกใช้เมื่อผู้ใช้สัมผัสกดปุ่มเมาส์หรือใช้สไตลัสเพื่อสัมผัสโดยไม่ต้องเคลื่อนไหว โดยปกติจะมีประโยชน์มากหากคุณต้องการแยกความแตกต่างระหว่างการคลิกผู้ใช้และการลากองค์ประกอบ
กดยาวท่าทางการกดยาวหมายถึงการทำงานของผู้ใช้ที่สัมผัสหน้าจอด้วยนิ้วเดียวและถือไว้สักครู่แล้วยกขึ้นโดยไม่ต้องขยับ ในระหว่างการโต้ตอบแบบกดนานเหตุการณ์ msgesturehold จะถูกไล่ออกหลายครั้งสำหรับสถานะต่าง ๆ ของท่าทาง:
Element.addeventListener ("msgesturedhold", handlehold);
ฟังก์ชั่นที่จับ HOLDH (EVT) {
if (evt.detail & evt.msgesture_flag_begin) {
// เริ่มส่งสัญญาณการเริ่มต้นของท่าทาง สำหรับท่าทางการระงับนี่หมายความว่าผู้ใช้ถืออยู่นานพอที่จะทำท่าทางที่สมบูรณ์และถือหากนิ้วถูกยกขึ้น
-
if (evt.detail & evt.msgesture_flag_end) {
// สิ้นสุดสัญญาณการสิ้นสุดของท่าทาง
-
if (evt.detail & evt.msgesture_flag_cancel) {
// ยกเลิกสัญญาณผู้ใช้เริ่มต้นท่าทาง แต่ยกเลิก สำหรับการระงับสิ่งนี้เกิดขึ้นเมื่อผู้ใช้ลากออกไปก่อนที่จะยก ธงนี้จะถูกส่งพร้อมกับธงท้ายการส่งสัญญาณการรับรู้ท่าทางเสร็จสมบูรณ์
-
-
ท่าทางแบบไดนามิก (การหดตัวการหมุนกวาดและลาก)
ท่าทางแบบไดนามิก (ตัวอย่างเช่นการหดตัวหรือการหมุน) จะถูกรายงานในรูปแบบของการเปลี่ยนแปลงซึ่งค่อนข้างคล้ายกับการแปลง CSS 2D ท่าทางแบบไดนามิกสามารถกระตุ้นเหตุการณ์สามเหตุการณ์ ได้แก่ msgesturestart, msgesturechange (ทริกเกอร์ซ้ำเมื่อท่าทางยังคงดำเนินต่อไป) และ msgestureend แต่ละเหตุการณ์มีข้อมูลเกี่ยวกับการปรับขนาด (หด) การหมุนการแปลงและความเร็ว
เนื่องจากมีการรายงานท่าทางแบบไดนามิกในการแปลงมันจะใช้งานง่ายมากกับการแปลง CSS 2D เพื่อจัดการองค์ประกอบเช่นภาพถ่ายหรือปริศนา ตัวอย่างเช่นคุณสามารถเปิดใช้งานการปรับขนาดการหมุนและการลากองค์ประกอบด้วยวิธีต่อไปนี้:
TargetElement.addeventListener ("Msgesturechange", Manipulatelement);
ฟังก์ชั่น manipulatelement (e) {
// Unabment รหัสต่อไปนี้หากคุณต้องการปิดใช้งานความเฉื่อยในตัวที่จัดทำโดยการจดจำท่าทางแบบไดนามิก
// ถ้า (E.Detail == E.MSGESTURE_FLAG_INERTIA)
// กลับ;
var m = ใหม่ mscssmatrix (e.target.style.transform); // รับการแปลง CSS ล่าสุดในองค์ประกอบ
e.target.style.transform = m
.translate (e.offsetx, e.offsety) // ย้ายแหล่งกำเนิดการแปลงภายใต้ศูนย์กลางของท่าทาง
.rotate (e.rotation * 180 / math.pi) // ใช้การหมุน
.Scale (E.Scale) // ใช้มาตราส่วน
.translate (e.translationx, e.translationy) // ใช้การแปล
.translate (-e.offsetx, -e.offsety); // ย้ายต้นกำเนิดการแปลงกลับ
-
ท่าทางแบบไดนามิกเช่นการซูมและการหมุนสามารถรองรับการทำงานของเมาส์ซึ่งสามารถทำได้โดยใช้ CTRL หรือตัวดัดแปลงกะตามลำดับในขณะที่หมุนล้อเมาส์