How to detect specific element in jQuery event propagation

Question

I've a notifications window (absolutely positioned div) and I want it to close when clicking everything outside that window.

I tried:

<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
})

Here, $(this) is not the element which throws the event, but the document.

Thank you for your time.

SOLUTION

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();
});

Thank you all :-)

I don't think this will work. Calling `stopPropagation` when it has reached `document` is too late. — pimvdb, Jul 10 '12 at 21:29

score 0 · Answer 1 · answered Jul 10 '12 at 21:28

I'd create a parent div to #notifWindow. Place it on top of the rest of the page and under #notifWindow. Bind your click event to this parent element and when it's clicked, remove #notifWindow and the parent.

You could even add some style elements to this parent div so it's translucent, slightly obscuring the rest of the page. This is a good visual signal to the user that the notifWindow is important, and also gives the hint that clicking off of the "window" will close it.

It could be an alternative :) – kbitdn Jul 10 '12 at 22:30 — kbitdn, Jul 10 '12 at 22:30

score 0 · Answer 2 · edited May 23 '17 at 10:09

Your on isn't hooking any event. Separate from that, you'll want to look at event.target. So::

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

That said, the usual way to create a modal window is to put an absolutely-positioned iframe that's the size of the viewport under the div, and capture clicks there. That way, your modal appears above form controls and such in IE, and of course it provides a handy target for clicks. Do a web search on "iframe shim" for examples (or here's a very basic example here on SO I wrote for another answer).

Thank you for event.target, this solves the problem for doing it in that way. — kbitdn, Jul 10 '12 at 22:36

score 0 · Answer 3 · answered Jul 10 '12 at 21:30

Demo http://jsfiddle.net/2g6Qs/1/

Use e.stopImmediatePropagation() : http://api.jquery.com/event.stopImmediatePropagation/

Hope this helps, :)

code

$('.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>

Thank you for helping me to understand stopImmediatePropagation(); — kbitdn, Jul 10 '12 at 22:30

How to detect specific element in jQuery event propagation

3 Answers3