JavaScript для мага


MouseDown, MouseMove и MouseUp - часть 2


}

 

 

// -->

</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. И мы можем приступить к рисованию на экране наших объектов.

 




Начало  Назад  Вперед



Книжный магазин