วิธีใช้เหตุการณ์ตัวชี้ใน JavaScript

ประเด็นที่สำคัญ

เพื่อให้มั่นใจถึงความครอบคลุมและการเข้าถึงสำหรับฐานผู้ใช้ที่กว้างขึ้น เว็บแอปพลิเคชันควรได้รับการออกแบบให้มีตัวเลือกอินพุตที่หลากหลายนอกเหนือจากเมาส์ทั่วไป แนวทางนี้ช่วยให้สามารถปรับตัวให้เข้ากับความต้องการและความชอบส่วนบุคคลได้มากขึ้น ในขณะเดียวกันก็ส่งเสริมการใช้งานแบบสากล

การใช้เหตุการณ์ตัวชี้ภายใน JavaScript ช่วยให้สามารถจัดการการโต้ตอบทั้งแบบใช้เมาส์และแบบสัมผัสได้อย่างมีประสิทธิภาพ ดังนั้นจึงขจัดข้อกำหนดสำหรับกระบวนการใช้งานแยกกันสำหรับเหตุการณ์แต่ละประเภทที่เกี่ยวข้อง

การออกแบบเหตุการณ์ตัวชี้ในการพัฒนาเว็บสมัยใหม่สะท้อนให้เห็นถึงเหตุการณ์ของเมาส์แบบดั้งเดิมอย่างใกล้ชิด ซึ่งอำนวยความสะดวกในการปรับซอร์สโค้ดที่มีอยู่แล้วเพื่อรองรับทั้งหน้าจอสัมผัสและอินพุตสไตลัส

ความแพร่หลายของเทคโนโลยีหน้าจอสัมผัสได้นำไปสู่การพึ่งพาอินพุตที่ใช้นิ้วมากขึ้นสำหรับการโต้ตอบทางดิจิทัล ดังนั้นจึงเป็นสิ่งสำคัญสำหรับแนวทางปฏิบัติในการพัฒนาเว็บไซต์ยุคใหม่ที่จะต้องรองรับและอำนวยความสะดวกในการโต้ตอบของผู้ใช้ในรูปแบบที่หลากหลายผ่านอุปกรณ์อินพุตต่างๆ นอกเหนือจากอินเทอร์เฟซที่ขับเคลื่อนด้วยเมาส์แบบดั้งเดิม

การใช้มาตรฐานล่าสุดที่เรียกว่า Pointer Events ใน JavaScript ช่วยให้สามารถผสานรวมอินพุตทั้งแบบใช้เมาส์และแบบสัมผัสได้อย่างราบรื่น ดังนั้นจึงไม่จำเป็นต้องมีกระบวนการใช้งานแยกกัน

เหตุการณ์ตัวชี้คืออะไร?

เหตุการณ์ตัวชี้ถือเป็นกระบวนทัศน์ที่ใช้ได้ในระดับสากลสำหรับการจัดการรูปแบบการป้อนข้อมูลที่หลากหลายภายในบริบทการท่องเว็บ ครอบคลุมอินเทอร์เฟซที่ใช้เคอร์เซอร์แบบดั้งเดิมควบคู่ไปกับทางเลือกร่วมสมัย เช่น หน้าจอสัมผัสและการโต้ตอบที่ขับเคลื่อนด้วยสไตลัส วิธีการที่สอดคล้องกันนี้ช่วยให้มั่นใจได้ว่าสามารถเชื่อมต่อกับเนื้อหาบนอินเทอร์เน็ตได้อย่างราบรื่น โดยไม่คำนึงถึงแพลตฟอร์มฮาร์ดแวร์ที่ใช้

โดยพื้นฐานแล้ว เหตุการณ์ตัวชี้ช่วยอำนวยความสะดวกในการจัดการการรวบรวมการโต้ตอบของผู้ใช้ โดยไม่คำนึงถึงที่มา

ประเภทของเหตุการณ์ตัวชี้

เหตุการณ์ของพอยน์เตอร์มีชื่อคล้ายคลึงกับเหตุการณ์ของเมาส์ที่คุณอาจรู้จักอยู่แล้ว ที่สอดคล้องกับแต่ละเหตุการณ์ของเมาส์ใน JavaScript คือเหตุการณ์ของตัวชี้ตามลำดับ ซึ่งช่วยให้สามารถแปลงจาก"เมาส์"เป็น"ตัวชี้"เพื่อรองรับอุปกรณ์ป้อนข้อมูลแบบสัมผัสและปากกา

แผนภูมิที่ให้ไว้แสดงให้เห็นการเปรียบเทียบแบบเคียงข้างกันของเหตุการณ์ตัวชี้ต่างๆ ซึ่งตรงกันข้ามกับเหตุการณ์ของเมาส์ที่สอดคล้องกัน:

เหตุการณ์ตัวชี้

|

เหตุการณ์เมาส์

—|—

ตัวชี้ลง

|

เลื่อนเมาส์

ตัวชี้

|

เลื่อนเมาส์

ตัวชี้ย้าย

|

เลื่อนเมาส์

ตัวชี้ออก

|

ปล่อยเมาส์

ตัวชี้

|

เลื่อนเมาส์

ตัวชี้

|

มูเซนเตอร์

ตัวชี้

|

เลื่อนเมาส์ออก

ตัวชี้ยกเลิก

|

ไม่มี

ได้ pointercapture

|

ไม่มี

สูญหายตัวชี้จับ

|

ไม่มี

เห็นได้ชัดว่ามีเหตุการณ์ตัวชี้เสริมสามเหตุการณ์ซึ่งขาดเหตุการณ์เมาส์ที่สัมพันธ์กัน ความเข้าใจเกี่ยวกับเหตุการณ์ดังกล่าวจะถูกอธิบายในเวลาอันควร

การใช้เหตุการณ์ตัวชี้ใน JavaScript

คุณสามารถใช้เหตุการณ์ตัวชี้ในลักษณะที่คล้ายคลึงกับเหตุการณ์ของเมาส์ และขั้นตอนการทำงานทั่วไปสำหรับการประมวลผลเหตุการณ์ดังกล่าวโดยทั่วไปจะเป็นไปตามโครงสร้างต่อไปนี้:

ใช้กลไกการสืบค้น DOM เพื่อดึงองค์ประกอบ HTML ที่เฉพาะเจาะจงจากโมเดลออบเจ็กต์เอกสารโดยการระบุตัวระบุหรือคุณลักษณะเฉพาะภายในโค้ด HTML ทำให้สามารถจัดการและการโต้ตอบกับองค์ประกอบที่เลือกใน JavaScript หรือภาษาการเขียนโปรแกรมอื่น ๆ ได้อย่างมีประสิทธิภาพ

การใช้เมธอด addEventListener ทำให้เราสามารถกำหนดเหตุการณ์ที่สนใจและเชื่อมโยงกับฟังก์ชันที่จะดำเนินการเมื่อเหตุการณ์นั้นเกิดขึ้น

ใช้คุณลักษณะและฟังก์ชันของออบเจ็กต์เหตุการณ์ที่ส่งเป็นพารามิเตอร์ไปยังฟังก์ชันเรียกกลับ ซึ่งแสดงถึงเหตุการณ์ที่ทำให้เกิดปฏิกิริยาหรือการตอบสนองในโค้ด

นี่คือตัวอย่างการใช้เหตุการณ์ pointermove:

 // Get the target element
const target = document.getElementById('target');

// Add an event listener to your target element
target.addEventListener('pointermove', handlePointerMove);

// Function to handle pointer move event
function handlePointerMove(ev) {
    // Handle the event however you want to
    target.textContent = `Moved at x: ${ev.clientX}, y: ${ev.clientY}`;
}

โค้ดที่ให้มาจะสร้างออบเจ็กต์ที่กำหนดภายใน DOM พร้อมด้วยฟังก์ชันการทำงานแบบสคริปต์ใน JavaScript ที่ตอบสนองต่อเหตุการณ์"pointermove"โดยใช้ฟังก์ชัน JavaScript โค้ดนี้จะเพิ่มตัวฟังเหตุการณ์ให้กับองค์ประกอบเป้าหมายที่ระบุซึ่งรวมทั้งการกระทำตามตัวชี้และฟังก์ชันที่เกี่ยวข้องเข้าด้วยกัน

โค้ดชิ้นนี้ช่วยให้เห็นภาพตำแหน่งขององค์ประกอบเป้าหมายบนเว็บเพจโดยการเคลื่อนที่ของตัวชี้ผ่านเคอร์เซอร์ นิ้ว หรือปากกา องค์ประกอบที่เป็นปัญหาได้รับการระบุผ่านตัวระบุ"เป้าหมาย"ที่เป็นเอกลักษณ์

ในทำนองเดียวกัน คุณสามารถใช้เหตุการณ์ตัวชี้ต่างๆ เพื่อวัตถุประสงค์ที่คุณต้องการได้

เหตุการณ์การยกเลิกตัวชี้

เหตุการณ์ PointerCancel จะถูกเปิดใช้งานเมื่อเหตุการณ์ตัวชี้อื่นรบกวนและยุติการดำเนินการที่กำลังดำเนินอยู่ก่อนที่จะเสร็จสิ้นตามที่ตั้งใจไว้ โดยทั่วไปแล้ว เบราว์เซอร์จะยกเลิกเหตุการณ์ตัวชี้ก่อนหน้าใดๆ ที่อาจเกิดขึ้นในขณะที่เกิดการหยุดชะงัก ปัจจัยหลายประการอาจนำไปสู่การเปิดใช้งานกิจกรรมนี้ รวมถึงแต่ไม่จำกัดเฉพาะ:

ในขณะที่ควบคุมอุปกรณ์อิเล็กทรอนิกส์อย่างแข็งขันผ่านการโต้ตอบแบบสัมผัส เช่น การลากองค์ประกอบผ่านจอแสดงผล ผู้ใช้อาจพบกับการหยุดชะงักในขั้นตอนการทำงานเนื่องจากมีสายเรียกเข้าหรือการแจ้งเตือนที่จำเป็นต้องได้รับการดูแลทันที

⭐เมื่อการวางแนวอุปกรณ์เปลี่ยนไป

⭐เมื่อหน้าต่างเบราว์เซอร์สูญเสียโฟกัส

เมื่อผู้ใช้เลือกที่จะออกจากอินเทอร์เฟซปัจจุบันหรือโต้ตอบกับโปรแกรมอื่น ส่งสัญญาณการออกจากจุดสนใจปัจจุบันและระบุการเปลี่ยนแปลงลำดับความสำคัญ

เหตุการณ์ pointercancel นำเสนอโซลูชันที่หลากหลายสำหรับการจัดการสถานการณ์ต่างๆ ในลักษณะที่ปรับให้เหมาะกับความต้องการเฉพาะของคุณ ตัวอย่างสาธิตมีให้ด้านล่าง:

 const target = document.getElementById('target');

target.addEventListener('pointercancel', (event) => {
    // Handle the situation where the pointer cancels. For example, you
    // can release the pointer capture
    target.releasePointerCapture(event.pointerId);
});

การจับตัวชี้

การจับพอยน์เตอร์ช่วยให้องค์ประกอบ HTML ที่กำหนดสามารถสกัดกั้นและตอบสนองต่อการโต้ตอบแบบพอยน์เตอร์ทั้งหมดที่พุ่งตรงไปที่องค์ประกอบนั้น ไม่ว่าสิ่งเหล่านั้นจะเกิดขึ้นภายในหรือนอกขอบเขตที่กำหนดไว้ก็ตาม

เมธอด setPointerCapture() ช่วยให้สามารถจับพอยน์เตอร์ที่เกี่ยวข้องกับองค์ประกอบเฉพาะได้ ในขณะที่เมธอด releasePointerCapture() จะปล่อยพอยน์เตอร์ที่บันทึกไว้ซึ่งเกี่ยวข้องกับองค์ประกอบนั้นโดยเฉพาะ

เหตุการณ์การจับพอยน์เตอร์ ทั้งที่ได้รับและสูญหาย สามารถนำไปใช้อย่างมีประสิทธิภาพในการจับพอยน์เตอร์ในสถานการณ์ต่างๆ

กิจกรรม gotpointercapture

เหตุการณ์ gotpointercapture เกิดขึ้นเมื่อองค์ประกอบจับอินพุตของตัวชี้ เหตุการณ์นี้สามารถใช้เพื่อกำหนดสถานะสำหรับจัดการเหตุการณ์ตัวชี้ในองค์ประกอบ HTML ตัวอย่างเช่น ในโปรแกรมวาดภาพ เหตุการณ์ gotpointercapture สามารถใช้ประโยชน์เพื่อกำหนดตำแหน่งเริ่มต้นของเคอร์เซอร์ได้

เหตุการณ์ Lostpointercapture

เหตุการณ์การจับภาพตัวชี้ที่หายไปจะถูกเปิดใช้งานเมื่อใดก็ตามที่องค์ประกอบยกเลิกการยึดตัวชี้เมาส์ไว้ เหตุการณ์นี้ให้โอกาสในการเผยแพร่หรือกำจัดสถานะที่กำหนดไว้ก่อนหน้านี้ซึ่งเริ่มต้นเมื่อองค์ประกอบได้รับการจับตัวชี้ ในแอปพลิเคชันกราฟิก เช่น โปรแกรมวาดภาพ กิจกรรม Lost Pointer Capture Event อาจถูกนำมาใช้เพื่อปกปิดการปรากฏตัวของเคอร์เซอร์ ปรับปรุงประสบการณ์ผู้ใช้ผ่านการโต้ตอบที่ราบรื่นและการดื่มด่ำกับภาพ

คุณสมบัติของเหตุการณ์ตัวชี้

เหตุการณ์ตัวชี้มีคุณสมบัติบางอย่างที่ช่วยเพิ่มการโต้ตอบและการตอบสนองบนเว็บไซต์ คุณลักษณะเหล่านี้สะท้อนคุณลักษณะที่พบในเหตุการณ์ของเมาส์ในขณะเดียวกันก็รวมคุณลักษณะเสริมด้วย งานชิ้นนี้จะเจาะลึกถึงคุณสมบัติที่เพิ่มเข้ามาเหล่านี้

คุณสมบัติ pointerId

pointerId เป็นตัวระบุเฉพาะที่กำหนดให้กับอินพุตแบบพอยน์เตอร์แต่ละตัว รวมถึงอินพุตที่ทำด้วยสไตลัส นิ้ว หรือเมาส์ ตัวระบุที่สร้างขึ้นอัตโนมัตินี้จัดทำโดยเบราว์เซอร์ ช่วยให้สามารถติดตามอินพุตหลายรายการ และอำนวยความสะดวกในการดำเนินการต่างๆ ที่เกี่ยวข้องกับอินพุตแต่ละรายการ

ในสถานการณ์การเล่นเกมแบบมัลติทัช คุณสมบัติ PointerId ทำหน้าที่เป็นวิธีที่มีประสิทธิภาพในการแยกแยะระหว่างอินพุตนิ้วหรือสไตลัสแต่ละอัน ด้วยการกำหนดตัวระบุที่ไม่ซ้ำกันให้กับพื้นผิวของพอยน์เตอร์แต่ละตัว ระบบสามารถแยกแยะและประมวลผลการสัมผัสที่แตกต่างกันจากหลายแหล่งได้อย่างแม่นยำ โดยอินพุตเริ่มต้นจะถูกกำหนดให้เป็น ID หลัก

คุณสมบัตินี้แสดงประโยชน์ใช้สอยได้มากเมื่อใช้กับอุปกรณ์ระบบสัมผัส เนื่องจากอุปกรณ์ดังกล่าวสามารถรองรับการป้อนข้อมูลด้วยนิ้วหลายนิ้วพร้อมกันโดยไม่ต้องใช้ฮาร์ดแวร์ต่อพ่วงเพิ่มเติม ในทางตรงกันข้าม อุปกรณ์ที่เน้นเคอร์เซอร์ซึ่งอาศัยการใช้พอยน์เตอร์เมาส์เป็นหลัก มีความสามารถจำกัดในการรับอินพุตของพอยน์เตอร์มากกว่าหนึ่งตัวพร้อมกัน จำเป็นต้องมีการรวมอุปกรณ์เสริมเพื่อเปิดใช้งานฟังก์ชันนี้

แน่นอนว่า นี่เป็นเวอร์ชันที่เรียบหรูของโค้ดในคำถาม:csharpvoid printPointerIds(int* ptr1, int* ptr2) {std::cout « “ID of Pointer 1:"« *ptr1 « std::endl;std::cout « “ID ของตัวชี้ 2:"« *ptr2 « std::endl;}//การใช้งาน:int main() {int arr[5]={0, 1, 2, 3, 4};auto ptr1=อ่า;//ประกาศและเริ่มต้นตัวชี้’ptr1’ด้วยที่อยู่ขององค์ประกอบแรกของอาร์เรย์’arr’.auto ptr2=&arr[1];//ประกาศและเริ่มต้นตัวชี้'

 const target = document.getElementById('target');

target.addEventListener('pointerdown', (event) => {
    console.log(`Pointer ID: ${event.pointerId}`);
    // Handle the pointer down event for the specific pointerId
});

คุณสมบัติ pointerType

“เมาส์” “ปากกา” หรือ “สัมผัส” ภาพประกอบที่ชัดเจนของการใช้คุณสมบัติ pointerType สามารถพบได้ด้านล่าง:

 function handlePointerEvent(event){
    // Using the pointerType property
    switch (event.pointerType) {
    case 'mouse':
        // Handle the situation where the pointing device is a mouse
        console.log(`Mouse Pointer ID: ${event.pointerId}`);
        break;
    case 'pen':
        // Handle the situation where the pointing device is a stylus
        console.log(`Stylus Pointer ID: ${event.pointerId}`);
        break;
    case 'touch':
        // Handle the situation where the pointing device is a finger touch
        console.log(`Touch Pointer ID: ${event.pointerId}`);
        break;
    default:
        // Handle other pointer types or cases
        console.log(`pointerType ${event.pointerType} is not supported`);
        break;
    }
}

// Attach pointer events to elements
element.addEventListener('pointerdown', handlePointerEvent);

คุณสมบัติความกว้างและความสูง

ขนาดของพื้นที่สัมผัสของพอยน์เตอร์จะแสดงเป็นหน่วยมิลลิเมตรตามคุณลักษณะเหล่านี้ ขออภัย เว็บเบราว์เซอร์บางตัวไม่รู้จักคุณสมบัติเหล่านี้ ส่งผลให้เบราว์เซอร์เหล่านั้นมีค่าคงที่เป็น 1

แอปพลิเคชันที่เหมาะสมสำหรับคุณลักษณะที่กล่าวมาข้างต้นสามารถพบได้ในโปรแกรมที่จำเป็นต้องมีอินพุตที่แน่นอน หรือต้องการการแยกแยะระหว่างอินพุตที่มีขนาดต่างกัน ตามภาพประกอบ ให้พิจารณาโปรแกรมวาดภาพโดยที่ขนาดที่เพิ่มขึ้นสอดคล้องกับฝีแปรงที่กว้างกว่า ในทางกลับกัน การวัดที่เล็กลงจะแสดงท่าทางที่แคบลง

โดยทั่วไป เมื่อทำงานกับเหตุการณ์การสัมผัสในการพัฒนาเว็บ เป็นเรื่องปกติที่จะใช้คุณสมบัติความกว้างและความสูง

ใช้เหตุการณ์ตัวชี้เพื่อความครอบคลุมมากขึ้น

การใช้เหตุการณ์ตัวชี้สามารถลดความซับซ้อนของกระบวนการรองรับอุปกรณ์ที่หลากหลายและรูปแบบอินพุตได้อย่างมาก โดยไม่จำเป็นต้องใช้ความพยายามมากเกินไปในส่วนของคุณ ขอแนะนำเป็นอย่างยิ่งให้ปฏิบัติตามมาตรฐานปัจจุบันโดยรวมเหตุการณ์เหล่านี้ไว้ในแอปพลิเคชันของคุณ เนื่องจากจะช่วยปรับปรุงประสบการณ์การใช้เว็บ