Введение в JavaScript для Мага | страница 48
MouseDown, MouseMove и MouseUp
Как я уже говорил, в языке JavaScript нет события MouseDrag. Поэтому мы должны пользоваться событиями MouseDown, MouseMove и MouseUp, реализуя механизм drag & drop. В следующем примере демонстрируется применение MouseMove — текущие координаты курсора мыши отображаются в окне состояния.
Можно видеть, что код скрипта почти такой же, как и в предыдущем примере:
window.captureEvents(Event.MOUSEMOVE);
window.onmousemove= displayCoords;
function displayCoords(e) {
status= "x: " + e.pageX + " y: " + e.pageY;
}
// — >
Координаты мыши отображаются в строке состояния.
Заметьте, что Вам необходимо написать именно Event.MOUSEMOVE, где слово MOUSEMOVE обязательно должно быть написано заглавными буквами. А указывая, какая функция должна быть вызвана, когда произойдет событие MouseMove, Вы должны писать ее строчными буквами: window.onmousemove=…
Теперь мы можем объединить оба последних примера. Мы хотим, чтобы были представлены координаты указателя мыши, когда пользователь перемещает мышь, нажав на клавишу. Следующий пример демонстрирует это:
Код этого примера выглядит следующим образом:
window.onmousedown= startDrag;
window.onmouseup= endDrag;
window.onmousemove= moveIt;
function startDrag(e) {
window.captureEvents(Event.MOUSEMOVE);
}
function moveIt(e) {
// показывать координаты
status= "x: " + e.pageX + " y: " + e.pageY;
}
function endDrag(e) {
window.releaseEvents(Event.MOUSEMOVE);
}
// — >
Нажмите на клавишу мыши и, не отпуская ее, передвиньте саму мышь. Координаты курсора будут отображаться в строке состояния.
Во-первых, мы заставляем объект window перехватывать сигналы о событиях MouseDown and MouseUp:
window.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);
Как видно, мы пользуемся символом | (или), чтобы сказать, что объект window должен перехватывать несколько указанных событий. Следующие две строки описывают, что именно должно происходить, когда указанные события имеют место:
window.onmousedown= startDrag;
window.onmouseup= endDrag;
В следующей строке кода определяется, что происходит, когда объект window получает сигнал о событии