Article
>  Home   HTML   CSS   JavaScript   PHP   Perl   Photoshop   TCP/IP 

วิธีตรวจสอบตำแหน่งของ mouse

โดย สรวุฒิ กอสุวรรณศิริ

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

การตรวจจับ Event ที่เกิดกับ mouse

เมื่อเราขยับเมาส์ คลิกเมาส์ หรือดับเบิลคลิกเมาส์ จะมี event เกิดขึ้นตามการกระทำของเรา ซึ่ง event นี้ก็เป็น object ตัวหนึ่งเช่นกัน เราจึงสามารถอ่านค่าตำแหน่ง การกระทำ และรายละเอียดอื่นๆ ที่เกิดขึ้นใน event ได้จากพรอเพอร์ตีของ event นั่นเอง ดังนั้นคำถามแรกที่เราจะต้องหาคำตอบก็คือ เราจะตรวจจับ event ที่เกิดกับ mouse ได้อย่างไร สำหรับผู้อ่านที่เคยเขียน JavaScript มาบ้างแล้ว คงเคยเขียน script ให้ทำงานกับ event ที่เกิดกับลิงก์ กับปุ่ม และแบบฟอร์มต่างๆ ซึ่งก็สามารถตรวจจับได้โดย การเพิ่มแอตทริบิวต์บางตัวอย่าง onclick="...." ลงไป แต่คราวนี้ อาจจะงงว่าจะตรวจจับ event ของเมาส์ ซึ่งมันไม่ใช่ element ใน HTML ได้ยังไงหว่า ???? คำตอบคือ event นั้นไม่ได้เกิดที่ mouse ครับ แต่มันเกิดที่ document ที่เราเคลื่อนเมาส์ไปมาอยู่ภายใน ดังนั้น เราก็สามารถกำหนดฟังก์ชั่นที่จะให้ mouse ทำงานได้ด้วยคำสั่งนี้ครับ

document.ชื่อ event = ชื่อฟังก์ชั่น

เช่น

document.onmousedown = RealDev_mouseDown

หลังจากนั้นก็ไปเขียนฟังก์ชั่น RealDev_mouseDown() ก็เรียบร้อยแล้วครับ ฟังก์ชั่นที่กำหนดให้ทำงานกับ event แบบนี้ เรียกว่าฟังก์ชั่น Event Handler ครับผม แต่มีเพิ่มเติมอีกนิดหนึ่ง ถ้าจะตรวจจับ Event ใหม่ๆที่มากับ JavaScript1.2 ใน Netscape คุณต้องเรียกใช้เมทธอด document.captureEvents() ด้วย จึงจะสามารถตรวจจับ Event นั้นได้ ซึ่งฟังก์ชั่นนี้ มีรูปแบบการใช้ดังนี้ครับ

ชื่อ object.captureEvents(eventtype)

เช่น

document.captureEvents(Event.MOUSEMOVE)

ชื่อ object เป็นชื่อของอ็อบเจกต์ที่เกิด event ซึ่งสำหรับในกรณีนี้ต้องเป็น document ส่วน eventtype คือ event ที่เราต้องการจะตรวจจับ ซึ่งต้องระบุค่าเป็น คลาส Event ตามด้วยชื่อ event(ใช้อักษรตัวใหญ่นะครับ)

การอ่านตำแหน่งของ mouse จาก Event

สำหรับวิธีการอ่านค่าจาก event ใน IE และ Netscape นั้นไม่เหมือนกัน ใน IE คุณสามารถอ่านค่าตำแหน่งของ mouse จาก event ได้จาก event.x และ event.y โดยตำแหน่งที่อ่านได้จะเป็นตำแหน่งของ mouse ในหน้าจอ ส่วนใน Netscape คุณต้องรับตัวแปร event เข้ามาในฟังก์ชั่น Event Handler ในรูปของพารามิเตอร์ แล้วอ่านค่าจาก ตัวแปรนั้น เช่น ถ้าผมสมมุติว่าตัวแปร event นี้ชื่อ my_event เราก็จะอ่านค่าตำแหน่งได้จาก my_event.pageX และ my_event.pageY ตำแหน่งที่อ่านได้จะเป็นตำแหน่งของเมาส์ในเอกสาร ดูดีๆนะครับ มันไม่เหมือนกับ IE ที่อ่านได้ตำแหน่งของเมาส์ในหน้าจอ ทีนี้ถ้าผมจะเขียนสคริปต์ให้อ่านตำแหน่ง ของเมาส์ในเอกสารใน IE ผมก็ต้องนำค่าตำแหน่งการ Scroll ของเอกสารบวกลงไปด้วย ถูกไหมครับ ดังนั้น สคริปต์ที่สามารถอ่านตำแหน่งของเมาส์ได้ทั้งใน Netscape และ IE จึงมีหน้าตาแบบนี้

var x = (ns4)? my_event.pageX : event.x+document.body.scrollLeft
var y = (ns4)? my_event.pageY : event.y+document.body.scrollTop

ลองดูตัวอย่างการตรวจสอบตำแหน่งนะครับ <html> <head> <title>Realdev.net - Mouse Position</title> <script language="JavaScript"> <!-- ns4 = (document.layers)? true:false ie4 = (document.all)? true:false function init() { document.onmousedown = mouseDown document.onmousemove = mouseMove if (ns4) document.captureEvents(Event.MOUSEMOVE) } function mouseDown(e) { if ((ns4 && e.which!=1) || (ie4 && event.button!=1)) return true var x = (ns4)? e.pageX : event.x+document.body.scrollLeft var y = (ns4)? e.pageY : event.y+document.body.scrollTop alert(x+','+y) return true } function mouseMove(e) { var x = (ns4)? e.pageX : event.x+document.body.scrollLeft var y = (ns4)? e.pageY : event.y+document.body.scrollTop status = "x:"+x+" y:"+y return true } //--> </script> </head> <body bgcolor="#FFFFFF" onload="init()"> ดูตำแหน่งของ mouse ได้ใน status bar หรือคลิกดูจากใน Dialog ก็ได้ครับ <br> </body> </html>

ไฟล์ตัวอย่างการตรวจสอบตำแหน่งของ mouse ครับ [คลิกไปดูได้เลย]

Back to top





© copyright 2001 Sorrawut Korsuwansiri