JavaScript для мага

       

MouseDown, MouseMove и MouseUp


Как я уже говорил, в языке JavaScript нет события MouseDrag. Поэтому мы должны пользоваться событиями MouseDown, MouseMove и MouseUp, реализуя механизм drag & drop. В следующем примере демонстрируется применение MouseMove - текущие координаты курсора мыши отображаются в окне состояния.

(online-версия руководства позволит Вам проверить этот скрипт немедленно)

Можно видеть, что код скрипта почти такой же, как и в предыдущем примере:

<html>

<script language="JavaScript">

<!--

  window.captureEvents(Event.MOUSEMOVE);

  window.onmousemove= displayCoords;

  function displayCoords(e) {

    status= "x: " + e.pageX + " y: " + e.pageY;

  }

// -->

</script>

Координаты мыши показаны в строке состояния.

</html>

Заметьте, что Вам необходимо написать именно Event.MOUSEMOVE, где слово MOUSEMOVE обязательно должно быть написано заглавными буквами. А указывая, какая функция должна быть вызвана, когда произойдет событие MouseMove, Вы должны писать ее строчными буквами: window.onmousemove=...



Теперь мы можем объединить оба последних примера. Мы хотим, чтобы были представлены координаты указателя мыши, когда пользователь перемещает мышь, нажав на клавишу.

(online-версия руководства позволит Вам проверить этот скрипт немедленно)

Код этого примера выглядит следующим образом:

<html>

<script language="JavaScript">

<!--

window.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);

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);


}

// -->

</script>

Двигайте мышь, удерживая ее клавишу нажатой. В окне состояния при этом отображаются координаты курсора.

</html>

Во-первых, мы заставляем объект window перехватывать сигналы о событиях MouseDown and MouseUp:

window.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);

Как видно, мы пользуемся символом | (или), чтобы сказать, что объект window должен перехватывать несколько указанных событий. Следующие две строки описывают, что именно должно происходить, когда указанные события имеют место:

window.onmousedown= startDrag;

window.onmouseup= endDrag;

В следующей строке кода определяется, что происходит, когда объект window получает сигнал о событии MouseMove.

window.onmousemove= moveIt;

Однако постойте, мы же не определили Event.MOUSEMOVE в window.captureEvents()! Это означает, что данное событие не будет перехватываться объектом window. Тогда почему мы указываем объекту window вызывать moveIt(), раз сигнал об этом событии никогда не достигает объекта window? Ответ на этот вопрос можно найти в функции startDrag(), которая вызывается сразу после того, как произойдет событие MouseDown:

function startDrag(e) {

  window.captureEvents(Event.MOUSEMOVE);

}

Это означает, что объект window начнет перехватывать событие MouseMove, как только будет нажата клавиша кнопка мыши. И мы должны прекратить перехватывать событие MouseMove, если произойдет событие MouseUp. Это делается в функции endDrag() с помощью метода releaseEvents():

function endDrag(e) {

  window.releaseEvents(Event.MOUSEMOVE);

}

Функция moveIt() записывает координаты мыши в окно состояния.

Теперь у нс есть все элементы скрипта, необходимые для регистрации событий, связанных с реализацией механизма drag & drop. И мы можем приступить к рисованию на экране наших объектов.


Содержание раздела