Wiki-учебник по веб-технологиям: JavaScript/MouseDownMouseMoveИMouseUp ...

Главная | Каталог |

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>

</html>


Пожалуйста обратите внимание на то, что вы должны писать Event.MOUSEMOVE, где MOUSEMOVE должно быть написано верхним регистром. При определении функции, которая вызывается, когда происходит событие MouseMove, dы должны использовать строчные буквы: 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>

</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. Теперь мы можем перейти к показу объектов на экране. .