JavaScript. Подробное руководство, 6-е издание

Флэнаган Дэвид

// Это событие обработано и не должно передаваться другим обработчикам

if (event.stopPropagation)

event.stopPropagation; // Стандартная модель

else

event.cancelBubble = true; // IE

// Предотвратить

выполнение действий, предусмотренных по умолчанию,

if (event.preventDefault)

event.preventDefault; // Стандартная модель

else

event.returnValue = false; // IE

/**

* Этот обработчик перехватывает события mousemove, возникающие

* в процессе буксировки элемента. Он отвечает за перемещение элемента.

**/

function moveHandler(e) {

if (!е) е = window.event; // Модель событий IE

// Переместить элемент в позицию указателя мыши с учетом позиций

// полос прокрутки и смещений относительно начального щелчка,

var scroll = getScrollOffsets;

elementToDrag.style.left = (e.clientX + scroll.x - deltaX) + "px";

elementToDrag.style.top = (e.clientY + scroll.у - deltaY) + "px";

// И прервать дальнейшее распространение события.

if (е.stopPropagation)

е.stopPropagation; // Стандартная модель

else

е.cancelBubble = true; // IE

}

/**

* Этот обработчик перехватывает заключительное событие mouseup,

* которое завершает операцию буксировки.

**/

function upHandler(e) {

if (!е) е = window.event; // Модель событий IE

// Удалить перехватывающие

обработчики событий,

if (document.removeEventListener) { // Модель событий DOM

document.removeEventListenerC'mouseup", upHandler, true);

document.removeEventListener("mousemove", moveHandler, true);

}

else

if (document.detachEvent) { // Модель событий IE 5+

elementToDrag.detachEvent("onlosecapture", upHandler);

elementToDrag.detachEvent("onmouseup", upHandler);

elementToDrag.detachEvent("onmousemove", moveHandler);

elementToDrag.releaseCapture;

}

// И прервать дальнейшее распространение события.

if (е.stopPropagation)

е.stopPropagation; // Стандартная модель

else

е.cancelBubble = true; // IE

}

}

Следующий фрагмент демонстрирует порядок использования функции drag в HTML-файле (это упрощенная версия примера 16.2 с добавленной поддержкой буксировки):

<script src="getScrollOffsets. js"x/script> <!-- требуется функция drag-->

<script src= "Drag. js"x/script> <!-- определение drag -->

<!-- Буксируемый элемент -->

<div style="positionabsolute; left:100px; top:100px; width:250px;

background-color: white; border: solid black;">

<!-- "Заголовок" окна. Обратите внимание на атрибут onmousedown.
– ->

<div style= "background-color: gray: border-bottom: dotted black;

padding: 3px; font-family: sans-serif; font-weight: bold;"

onmousedown="drag(this.parentNode, event);">

Перетащи меня <!-- Содержимое заголовка -->