เมื่อเราขยับเมาส์ คลิกเมาส์ หรือดับเบิลคลิกเมาส์ จะมี 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
ลองดูตัวอย่างการตรวจสอบตำแหน่งนะครับ
<![CDATA[
<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
|
|
