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);
}
Поделиться:
Популярные книги
Фантом памяти
2. Преступления правильной жизни
Детективы:
прочие детективы
8.43
рейтинг книги
Студент из прошлого тысячелетия
2. Соприкосновение миров
Фантастика:
героическая фантастика
попаданцы
аниме
5.00
рейтинг книги
Валькирия
Фантастика:
фэнтези
9.49
рейтинг книги
На границе империй. Том 5
5. Фортуна дама переменчивая
Фантастика:
боевая фантастика
попаданцы
7.50
рейтинг книги
Старый, но крепкий 4
4. Культивация без насилия
Фантастика:
уся
фэнтези
5.00
рейтинг книги
Последний реанорец. Том I и Том II
1. Высшая Речь
Фантастика:
фэнтези
7.62
рейтинг книги
Черный маг императора 3
3. Черный маг императора
Фантастика:
попаданцы
аниме
5.00
рейтинг книги
Древесный маг Орловского княжества 3
3. Орловское княжество
Фантастика:
аниме
сказочная фантастика
фэнтези
попаданцы
гаремник
5.00
рейтинг книги
Кодекс Охотника. Книга XXXII
32. Кодекс Охотника
Фантастика:
аниме
фэнтези
попаданцы
5.00
рейтинг книги
Наследие Маозари 7
7. Наследие Маозари
Фантастика:
боевая фантастика
юмористическое фэнтези
постапокалипсис
рпг
фэнтези
эпическая фантастика
5.00
рейтинг книги
Сердце Дракона. Том 10
10. Сердце дракона
Фантастика:
фэнтези
героическая фантастика
боевая фантастика
7.14
рейтинг книги
Я уже граф. Книга VII
7. Дорогой барон!
Фантастика:
боевая фантастика
попаданцы
аниме
5.00
рейтинг книги
Я Гордый часть 2
2. Стальные яйца
Фантастика:
фэнтези
попаданцы
аниме
5.00
рейтинг книги
Наномашины, сынок! Том 1
1. Чего смотришь? Иди книгу читай
Фантастика:
фэнтези
попаданцы
аниме
5.00