ბრაუზერის ფანჯარაში კურსორის გადაადგილების საპასუხოდ ზოგიერთი მოქმედების დასაპროგრამებლად ზოგჯერ საჭიროა მისი კოორდინატების განსაზღვრა. ეს შეიძლება გაკეთდეს სკრიპტის საშუალებით, რომელსაც აქვს შესაძლებლობა თვალყური ადევნოს ბრაუზერში მომხდარ მოვლენებს. კლიენტის მხრიდან JavaScript სკრიპტს აქვს ეს შესაძლებლობა. ქვემოთ მოცემულია ამ ენის შესაძლებლობების გამოყენებით კურსორის კოორდინატების მიღების ერთ-ერთი ვარიანტი.
ინსტრუქციები
Ნაბიჯი 1
გამოიყენეთ ღონისძიების ობიექტის თვისებები კურსორის ამჟამინდელი კოორდინატების მისაღებად. ამ ობიექტს აქვს მთელი თვისებები, რომლებიც მნიშვნელოვანია მაუსის კურსორის კოორდინატების დასადგენად. LayerX თვისება შეიცავს პიქსელებში გაზომულ მანძილს მიმდინარე ფენის მარცხენა კიდიდან, და LayerY - იგივე მანძილი მისი ზედა კიდიდან. ამ ორ თვისებას აქვს სინონიმები - event– ის ნაცვლად. LayerX, შეგიძლიათ დაწეროთ event.x და event– ის ნაცვლად. LayerY, შეგიძლიათ დაწეროთ event.y. PageX და pageY თვისებები იკავებს კურსორის ჰორიზონტალურ და ვერტიკალურ კოორდინატებს ბრაუზერის ფანჯრის ზედა მარცხენა კიდეთან, ხოლო screenX და screenY თვისებები მსგავსი მნიშვნელობებით იკავებენ მონიტორის ეკრანს.
ნაბიჯი 2
დაამატეთ ბრაუზერის ტიპის შემოწმება თქვენს კოდს და გამოიყენეთ clientX და clientY თვისებები ღონისძიების ობიექტზე ზემოხსენებული თვისებების გარდა. ეს აუცილებელია, რადგან Microsoft იყენებს სხვა ქონების აღნიშვნას თავის Internet Explorer ბრაუზერში. თქვენ შეგიძლიათ დააკავშიროთ კოორდინატების განსაზღვრის ორივე მიდგომა, მაგალითად, ასე:
თუ (evevnt.pageX || evevnt.pageY) {
კოორდინატი X = evevnt.pageX;
კოორდინატი Y = evevnt.pageY;
}
სხვაგან თუ (evevnt.clientX || evevnt.clientY) {
კოორდინატი X = evevnt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
კოორდინატი Y = evevnt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
ნაბიჯი 3
განათავსეთ კოორდინატების განსაზღვრის კოდი მორგებულ ფუნქციაში. Მაგალითად:
ფუნქცია GetMouse (evevnt) {
var კოორდინატი X = 0, კოორდინატი Y = 0;
თუ (! evevnt) evevnt = ფანჯარა. event;
თუ (evevnt.pageX || evevnt.pageY) {
კოორდინატი X = evevnt.pageX;
კოორდინატი Y = evevnt.pageY;
}
სხვაგან თუ (evevnt.clientX || evevnt.clientY) {
კოორდინატი X = evevnt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
კოორდინატი Y = evevnt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
დაბრუნება {"ordinX ": კოორდინატი X," კოორდინატი ": კოორდინატიY};
}
ეს ფუნქცია აბრუნებს ორი დასახელებული ელემენტის მასივს, რომელთაგან პირველი (კოორდინაციის გასაღებით) შეიცავს X კოორდინატს, ხოლო მეორე (coordY) შეიცავს Y კოორდინატს.
ნაბიჯი 4
დარეკეთ ამ ფუნქციას რომელიმე ღონისძიებაზე - მაგალითად, მაუსის გადაადგილების ღონისძიებაზე (onmousemove) დოკუმენტის კონტექსტში. ქვემოთ მოყვანილი ნიმუში იყენებს ფუნქციას მაუსის კოორდინატების სტატუსის ზოლის გასასვლელად:
document.onmousemove = ფუნქცია (evevnt) {var CurCoord = GetMouse (evevnt); window.status = "კოორდინატი X:" + CurCoord.coordX + "px, კოორდინატი Y:" + CurCoord.coordY + "px";};
