Координаты указателя мыши
5 декабря 2007, 18:10
Автор: Александр Бурцев [bur]
При движении мыши в окне браузера часто требуется определить её координаты, например при создании интерфейса с различного рода "перетаскиваниями". За точку отсчета (x=0, y=0) принимается верний левый угол документа.
// Пишем функцию, определяющую координаты
function defPosition(event) {
var x = y = 0;
if (document.attachEvent != null) { // Internet Explorer & Opera
x = window.event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
y = window.event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
} else if (!document.attachEvent && document.addEventListener) { // Gecko
x = event.clientX + window.scrollX;
y = event.clientY + window.scrollY;
} else {
// Do nothing
}
return {x:x, y:y};
}
// Простая проверка
// С помощью document.write выведем координаты прямо в окно браузера
// Они будут обновлять при движении мыши
document.onmousemove = function(event) {
var event = event || window.event;
document.body.innerHTML = "x = " + defPosition(event).x + ", y = " + defPosition(event).y;
}
function defPosition(event) {
var x = y = 0;
if (document.attachEvent != null) { // Internet Explorer & Opera
x = window.event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
y = window.event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
} else if (!document.attachEvent && document.addEventListener) { // Gecko
x = event.clientX + window.scrollX;
y = event.clientY + window.scrollY;
} else {
// Do nothing
}
return {x:x, y:y};
}
// Простая проверка
// С помощью document.write выведем координаты прямо в окно браузера
// Они будут обновлять при движении мыши
document.onmousemove = function(event) {
var event = event || window.event;
document.body.innerHTML = "x = " + defPosition(event).x + ", y = " + defPosition(event).y;
}