Чтение онлайн

на главную - закладки

Жанры

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

Важно отметить, что обработчики событий «mousemove» и «mouseup» регистрируются как перехватывающие обработчики. Это обусловлено тем, что пользователь может перемещать мышь быстрее, чем сможет перемещаться элемент документа, в результате чего некоторые события «mousemove» могут возникать за пределами буксируемого элемента. В фазе всплытия эти события просто не будут передаваться нужным обработчикам. В отличие от стандартной модели модель событий, реализованная в IE, не поддерживает фазу перехвата, но она поддерживает специализированный метод

setCapture,
позволяющий перехватывать события мыши в подобных случаях. Пример наглядно демонстрирует, как действует этот метод.

Наконец, обратите внимание, что функции

moveHandler
и
upHandler
определены внутри функции
drag.
Благодаря тому, что они определены во вложенной области видимости, эти функции могут пользоваться аргументами и локальными переменными функции
drag,
что существенно упрощает их реализацию.

Пример 17.2. Буксировка элементов документа

/**

* Drag.js: буксировка абсолютно позиционированных HTML-элементов.

*

* Этот модуль определяет единственную функцию drag, которая должна вызываться

* из обработчика события onmousedown. Последующие события mousemove будут вызывать

* перемещение указанного элемента. Событие mouseup будет завершать буксировку.

* Эта реализация действует в обеих моделях событий, стандартной и IE.

* Использует функцию getScrollOffsets, представленную выше в книге.

*

* Аргументы:

*

* elementToDrag: элемент, принявший событие mousedown или содержащий его элемент.

* Этот элемент должен иметь абсолютное позиционирование. Значения его свойств style.left

* и style.top будут изменяться при перемещении указателя мыши пользователем.

*

* event: объект Event, полученный обработчиком события mousedown.

**/

function drag(elementToDrag, event) {

// Преобразовать начальные координаты указателя мыши в координаты документа

var scroll = getScrollOffsets: // Вспомогательная функция, объявленная

// где-то в другом месте

var startX = event.clientX + scroll.x;

var startY = event.clientY + scroll.y;

// Первоначальные координаты (относительно начала документа) элемента, который

// будет перемещаться. Так как elementToDrag имеет абсолютное позиционирование,

// предполагается, что его свойство offsetParent ссылается на тело документа,

var origX = elementToDrag.offsetLeft;

var origY = elementToDrag.offsetTop;

// Найти расстояние между точкой события mousedown и верхним левым углом элемента.

// Это расстояние будет учитываться при перемещении указателя мыши,

var deltaX = startX - origX;

var deltaY = startY - origY;

// Зарегистрировать обработчики событий mousemove и mouseup,

// которые последуют за событием mousedown,

if (document.addEventListener) { // Стандартная модель событий

// Зарегистрировать перехватывающие обработчики в документе

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

document.addEventListener("mouseup”, upHandler, true);

}

else

if (document.attachEvent) { // Модель событий IE для IE5-8

// В модели событий IE перехват событий осуществляется вызовом

// метода setCapture элемента.

elementToDrag.setCaptuге;

elementToDrag.attachEvent("onmousemove”, moveHandleг);

elementToDrag.attachEvent("onmouseup", upHandler);

// Интерпретировать потерю пер’ехвата событий мыши как событие

mouseup elementToDrag.attachEvent("onlosecapture", upHandler);

}

Поделиться:
Популярные книги

Кодекс Охотника. Книга XII

Винокуров Юрий
12. Кодекс Охотника
Фантастика:
боевая фантастика
городское фэнтези
аниме
7.50
рейтинг книги
Кодекс Охотника. Книга XII

Ожерелье Странника

Хаггард Генри Райдер
Приключения:
исторические приключения
7.50
рейтинг книги
Ожерелье Странника

Эволюционер из трущоб. Том 12

Панарин Антон
12. Эволюционер из трущоб
Фантастика:
попаданцы
аниме
фэнтези
5.00
рейтинг книги
Эволюционер из трущоб. Том 12

Лекарь Империи 15

Карелин Сергей Витальевич
15. Лекарь Империи
Фантастика:
городское фэнтези
аниме
фэнтези
попаданцы
6.80
рейтинг книги
Лекарь Империи 15

Измена. Свадьба дракона

Белова Екатерина
Любовные романы:
любовно-фантастические романы
эро литература
5.00
рейтинг книги
Измена. Свадьба дракона

Солдат Империи

Земляной Андрей Борисович
1. Страж
Фантастика:
попаданцы
альтернативная история
6.67
рейтинг книги
Солдат Империи

Инженер Петра Великого 2

Гросов Виктор
2. Инженер Петра Великого
Фантастика:
попаданцы
альтернативная история
фэнтези
5.00
рейтинг книги
Инженер Петра Великого 2

Третье правило диверсанта

Бычков Михаил Владимирович
Фантастика:
постапокалипсис
5.67
рейтинг книги
Третье правило диверсанта

На границе империй. Том 10. Часть 4

INDIGO
Вселенная EVE Online
Фантастика:
боевая фантастика
космическая фантастика
попаданцы
5.00
рейтинг книги
На границе империй. Том 10. Часть 4

Цеховик. Книга 1. Отрицание

Ромов Дмитрий
1. Цеховик
Фантастика:
попаданцы
альтернативная история
5.75
рейтинг книги
Цеховик. Книга 1. Отрицание

Сирийский рубеж 2

Дорин Михаил
6. Рубеж
Фантастика:
попаданцы
альтернативная история
5.00
рейтинг книги
Сирийский рубеж 2

Я не царь. Книга XXIV

Дрейк Сириус
24. Дорогой барон!
Фантастика:
юмористическое фэнтези
аниме
попаданцы
5.00
рейтинг книги
Я не царь. Книга XXIV

Старая школа рул

Ромов Дмитрий
1. Второгодка
Фантастика:
альтернативная история
6.00
рейтинг книги
Старая школа рул

Наследник

Майерс Александр
3. Династия
Фантастика:
попаданцы
аниме
фэнтези
5.00
рейтинг книги
Наследник