О распространении событий
Здравствуйте форумчане.
Есть функция drag(), которая вызывается обработчиком события mousedown. С помощью нее можно перетаскивать элементы HTML. Код рабочий, но я хочу разобраться в его работе. Вот он: function drag(elementToDrag, event) { //следующие три строки вычисляют расстояние от левого верхнего угла перетаскиваемого эл-та var scroll = getScrollOffsets(); // до точки, где указатель инициировал событие mousedown var deltaX = event.clientX + scroll.x - elementToDrag.offsetLeft; var deltaY = event.clientY + scroll.y - elementToDrag.offsetTop; //регистрируются обработчики document.addEventListener("mouseup", upHandler, true); document.addEventListener("mousemove", moveHandler, true); event.stopPropagation(); // откл. дальнейшее распространение события event.preventDefault(); // откл. действий по умолчанию function moveHandler(e) { //обработчик события mousemove var scroll = getScrollOffsets(); elementToDrag.style.left = (e.clientX + scroll.x - deltaX) + "px"; elementToDrag.style.top = (e.clientY + scroll.y - deltaY) + "px"; e.stopPropagation(); } function upHandler(e) { // обработчик события mouseup document.removeEventListener("mouseup", upHandler, true); document.removeEventListener("mousemove", moveHandler, true); e.stopPropagation(); } } // функция для получения позиции полос прокрутки function getScrollOffsets(w) { w = w || window; if (w.pageXOffset != null) return {x: w.pageXOffset, y:w.pageYOffset}; var d = w.document; if (document.compatMode == "CSS1Compat") return {x:d.documentElement.scrollLeft, y:d.documentElement.scrollTop}; return { x: d.body.scrollLeft, y: d.body.scrollTop }; } Код взят из книги Дэвида Флэнагана "javascript: подробное руководство", пример 17.2. Я его сократил со 100 строк до 38. Кроссбраузерность, конечно, ни к черту, но не в этом суть. В книге было написано следующее: Важно отметить, что обработчики mousemove и mouseup зарегистрированы как перехватывающие, т. к. пользователь может двигать мышь быстрее, чем элемент документа будет успевать за ней следовать, и некоторые из этих событий могут происходить вне исходного элемента документа. Вот мой вопрос: разве не все равно, где происходит событие? Ведь оно и на фазе перехвата и на фазе всплытия достигает объекта document, где и зарегистрированы наши обработчики mousemove и mouseup. Кроме того, я пробовал заменить все аргументы true на false и код прекрасно продолжал работать. Или я чего-то не знаю? Прошу направить меня на путь истинный. |
Часовой пояс GMT +3, время: 21:37. |