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




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



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