MouseDown, MouseMove и MouseUp

Поскольку я уже сообщил Вам, что JavaScript не знает событие MouseDrag. Следовательно мы должны использовать события MouseDown, MouseMove и MouseUp

, чтобы выполнять drag & drop. Следующий пример показывает использование MouseMove. В строке состояния отображаются текущие координаты курсора мыши.

Вы можете видеть, что этот код - почти такой же, как и в предыдущем примере:

<html>

window.captureEvents(Event.MOUSEMOVE);

window.onmousemove= displayCoords;

function displayCoords(e) { status= "x: " + e.pageX + " y: " + e.pageY; }

// --> </script>

Mouse coordinates are displayed on the statusbar.

</html>

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

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

Код для этого примера выглядит так:

<html>

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) { // display coordinates status= "x: " + e.pageX + " y: " + e.pageY; }

function endDrag(e) { window.releaseEvents(Event.MOUSEMOVE); }

// --> </script>

Push the mouse button and move the mouse. The coordinates are being displayed on the statusbar.

</html>

Сначала мы указываем Window-объекту фиксировать события MouseDown и 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. Теперь мы можем перейти к показу объектов на экране. .

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