Непрофессиональное введение в JAVASCRIPT



         

MouseDown, MouseMove и MouseUp


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

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

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

<html>

<script language="JavaScript"> <!--

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>

<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) { // 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-объектом. Следующие две строки определяют то, что случится, когда произойдут эти события:




Содержание  Назад  Вперед