Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.04.2014, 16:52
Новичок на форуме
Отправить личное сообщение для murtukov Посмотреть профиль Найти все сообщения от murtukov
 
Регистрация: 11.04.2014
Сообщений: 6

О распространении событий
Здравствуйте форумчане.

Есть функция 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 и код прекрасно продолжал работать. Или я чего-то не знаю? Прошу направить меня на путь истинный.

Последний раз редактировалось murtukov, 11.04.2014 в 16:55.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Получить список обработчиков событий Logo Events/DOM/Window 8 13.02.2015 22:57
Ползунок JQuery: несколько событий? Veterinar jQuery 9 10.01.2014 19:57
Не правильное распознавание (понимае) событий myfallensoul jQuery 1 06.11.2012 22:05
Переопределение событий lispik jQuery 4 13.01.2011 12:30
Скопировать обработчики событий с одного элемента на другой. Jurasmi Events/DOM/Window 3 10.11.2010 19:03