JQuery Event Bubble

Question

У меня есть событие mousedown, прикрепленное к элементу привязки, который делает много вещей.

У меня также есть событие mousedown, прикрепленное к документу, и из-за пузырьков это событие вызывается всякий раз, когда вызывается событие, прикрепленное к якору. Это не то, что я хочу.

Могу ли я связать событие с задержкой? Я не хочу использовать stopPropagation.

$('a').mousedown ->
  ...
  openWindow()
  $(document).mousedown ->
     ...
     closeWindow()

Редактировать

Я создаю хак

$.fn.onBubble = (events, selector, data, handler) ->
    setTimeout => 
        this.on events, selector, data, handler 
    , 0

Работа, но, как очень некрасиво

Answer 1

Как отмечается в одном из комментариев, единственный способ остановить всплытие событий - это stopPropagation. Тем не менее, если есть оба условия, когда вы делаете хотите предотвратить пузыривание, и другие, когда вы не , вы можете поместить event.stopPropagation() в оператор if:

$(...).mousedown(function(event) {
    if(/* some condition */) { event.stopPropagation(); }
});

В качестве альтернативы вы можете добавить условие в обработчик событий, прикрепленный к документу. Например:

$(document).mousedown(function(event) {
    if($(event.target).is("a")) {
        return; // if the element that originally trigged this event
                // (i.e. the target) is an anchor, then immediately return.
    }
    /** code that runs if event not from an anchor **/
});

Этот фрагмент использует $.fn.is, чтобы определить, было ли событие вызвано привязкой. Если он сгенерирован привязкой, код немедленно возвращается, что фактически игнорирует всплывающее окно события.

РЕДАКТИРОВАТЬ в ответ на комментарий:

Если я правильно понимаю, вы хотите закрыть окно, если пользователь нажимает на что-либо, что не в окне. В этом случае попробуйте это:

function whenWindowOpens { // Called when the window is opened
    var windowElement; // Holds actual window element (not jQuery object)
    $(document).bind("mousedown", function(event) {
        if($.contains(windowElement, event.target)) {
            return; // Ignore mouse downs in window element
        }

        if($(event.target).is(windowElement)) {
            return; // Ignore mouse downs on window element
        }

        /** close window **/

        $(this).unbind(event); // detaches event handler from document
    });
}

Это в основном вариант второго решения, предложенного выше. Первые два оператора if гарантируют, что нажатие не происходило ни в (при использовании $.contains), ни в (при использовании $.fn.is снова) windowElement. Когда оба утверждения ложны, мы закрываем окно и отменяем привязку текущего обработчика события. Обратите внимание, что $.contains принимает только необработанные элементы DOM - , а не объекты jQuery. Чтобы получить необработанный элемент DOM из объекта jQuery, используйте $.fn.get.