Как обнаружить определенный элемент в распространении события jQuery

У меня есть окно уведомлений (абсолютно позиционированное div), и я хочу, чтобы оно закрывалось при нажатии всего, что находится за пределами этого окна.

Я старался:

<div id="#notifWindow">
    <div id="notifs">Notifications...</div>
    <a class="ajax" data-bla="blabla">Click for ajax</a>
</div>

$(document).on(function(event){
    // If clicking over child elements stopPropagation() else window is closed.
    if ($(this).closest('#notifWindow').length) event.stopPropagation();
    else $('#notifWindow').hide();
})

// Just for your information

$(document).on('click', 'a.ajax', function(event){
    // If I use onclick=event.stopPropagation() in #notifWindow this ajax fails
})

Здесь $(this) — это не элемент, вызывающий событие, а документ.

Спасибо за уделенное время.

РЕШЕНИЕ

http://jsfiddle.net/8CyQU/

// Every .ajax inside #notifWindow (dinamically ajax generated) is executed.
$('#notifWindow').on('click', '.ajax', function(event) {
    alert('This ajax is executed!');
});

// If clicking everywhere inside #notifWindow the propagation of 'click' is stopped
$('#notifWindow').on('click', function(event) {
    event.stopPropagation();

$(document).on('click', '#open', function(event){
    $('#notifWindow').slideDown();
    event.stopInmediatePropagation(); // It avoid other click events for (document).
});

// Hides the window clicking everywhere
$(document).on('click', function(event) {
    $('#notifWindow').hide();
});

Спасибо вам всем :-)


events jquery live stoppropagation
person kbitdn    schedule 10.07.2012    source источник
comment
Я не думаю, что это сработает. Вызывать stopPropagation, когда он достиг document, слишком поздно.   -  person pimvdb    schedule 11.07.2012

Ответы (3)


arrow_upward
0
arrow_downward

Я бы создал родительский div для #notifWindow. Поместите его поверх остальной части страницы и под #notifWindow. Привяжите событие клика к этому родительскому элементу и при нажатии удалите #notifWindow и родительский элемент.

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

person Surreal Dreams    schedule 10.07.2012
comment
Это может быть альтернативой :) - person kbitdn; 11.07.2012

arrow_upward
0
arrow_downward

Ваш on не перехватывает события. Отдельно от этого вам стоит взглянуть на event.target. Так::

$(document).on("click", function(event){
   if ($(event.target).closest("#notifWindow")[0]) {
       // Click on the notify window
   }
   else {
       // Click elsewhere, close the notify window
   }
});

Тем не менее, обычный способ создать модальное окно — поместить абсолютно позиционированное iframe, равное размеру области просмотра, под div и фиксировать клики там. Таким образом, ваше модальное окно появляется над элементами управления формой и т. д. в IE, и, конечно же, оно обеспечивает удобную цель для кликов. Выполните поиск в Интернете по "iframe shim" для примеров (или вот очень простой пример здесь, на SO, который я написал для другого ответа ).

person T.J. Crowder    schedule 10.07.2012
comment
Спасибо за event.target, это решает проблему, связанную с этим. - person kbitdn; 11.07.2012

arrow_upward
0
arrow_downward

Демо http://jsfiddle.net/2g6Qs/1/

Используйте e.stopImmediatePropagation(): http://api.jquery.com/event.stopImmediatePropagation/

Надеюсь, это поможет, :)

код

$('.parent').delegate('.child','click',function(e){
    alert('child click');
    e.stopImmediatePropagation();
});

$('.parent').delegate('a.ajax','click',function(e){
    alert('anchor ajax click');
    e.stopImmediatePropagation();
});

$('.parent').bind('click',function(e){
    alert('parent click');
});

html

<div class="parent" id="notifWindow">parent
    <div class="child" id="notifs">child</div>
    <div class="child">child</div>
    <a class="ajax" data-bla="blabla">Click for ajax</a>
</div>
person Tats_innit    schedule 10.07.2012
comment
Спасибо за помощь в понимании stopImmediatePropagation(); - person kbitdn; 11.07.2012
comment
@kbitdn Не беспокойтесь, рад, что могу помочь :) - person Tats_innit; 11.07.2012