Upang mai-program ang ilang mga pagkilos bilang tugon sa paggalaw ng cursor sa window ng browser, kinakailangan upang matukoy ang mga coordinate nito. Maaari itong magawa ng isang script na may kakayahang subaybayan ang mga kaganapan na nagaganap sa browser. Ang isang script ng JavaScript sa panig ng kliyente ay may kakayahang ito. Sa ibaba ay inilarawan ang isa sa mga pagpipilian para sa pagkuha ng mga coordinate ng cursor gamit ang mga kakayahan ng wikang ito.
Panuto
Hakbang 1
Gumamit ng mga katangian ng object ng kaganapan upang makuha ang kasalukuyang mga coordinate ng cursor. Ang bagay na ito ay may isang buong hanay ng mga pag-aari na nauugnay sa pagtukoy ng mga coordinate ng mouse cursor. Naglalaman ang pag-aari ng LayerX ng distansya na sinusukat sa mga pixel mula sa kaliwang gilid ng kasalukuyang layer, at LayerY - ang parehong distansya mula sa tuktok na gilid nito. Ang dalawang pag-aari na ito ay may mga kasingkahulugan - sa halip na kaganapan. LayerX, maaari kang magsulat ng event.x, at sa halip na kaganapan. LayerY, maaari kang magsulat ng event.y. Ang mga pag-aari ng pageX at pageY ay nagtataglay ng pahalang at patayong mga coordinate ng cursor na may kaugnayan sa kaliwang itaas na gilid ng window ng browser, at ang mga katangian ng screenX at screenY ay nagtataglay ng katulad na mga halaga na nauugnay sa screen ng monitor.
Hakbang 2
Magdagdag ng uri ng pag-check ng browser sa iyong code at gamitin ang mga clientX at clientY na katangian bilang karagdagan sa mga katangian sa itaas sa object ng kaganapan. Kailangan ito dahil gumagamit ang Microsoft ng ibang pagtatalaga ng pag-aari sa browser ng Internet Explorer nito. Maaari mong pagsamahin ang parehong mga diskarte sa pagtukoy ng mga coordinate, halimbawa, tulad nito:
kung (evevnt.pageX || evevnt.pageY) {
coordinateX = evevnt.pageX;
coordinateY = evevnt.pageY;
}
kung hindi man (evevnt.clientX || evevnt.clientY) {
coordinateX = evevnt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
coordinateY = evevnt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
Hakbang 3
Ilagay ang coordinate kahulugan code sa isang pasadyang pagpapaandar. Halimbawa:
pagpapaandar GetMouse (evevnt) {
var coordinateX = 0, coordinateY = 0;
kung (! evevnt) evevnt = window.event;
kung (evevnt.pageX || evevnt.pageY) {
coordinateX = evevnt.pageX;
coordinateY = evevnt.pageY;
}
kung hindi man (evevnt.clientX || evevnt.clientY) {
coordinateX = evevnt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
coordinateY = evevnt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
ibalik ang " coordX ": coordinateX," coordY ": coordinateY};
}
Ang pagpapaandar na ito ay nagbabalik ng isang hanay ng dalawang pinangalanang mga elemento, ang una sa mga (kasama ang coordX key) ay naglalaman ng X coordinate, at ang pangalawa (coordY) ay naglalaman ng koordinasyon ng Y.
Hakbang 4
Tawagin ang pagpapaandar na ito sa ilang kaganapan - halimbawa, sa kaganapan ng paglipat ng mouse (onmousemove) sa konteksto ng dokumento. Ang sample sa ibaba ay gumagamit ng isang pagpapaandar upang ma-output ang mga coordinate ng mouse sa status bar:
document.onmousemove = function (evevnt) {var CurCoord = GetMouse (evevnt); window.status = "coord X:" + CurCoord.coordX + "px, coord Y:" + CurCoord.coordY + "px";};
