Is it possible to stop child click events propagating to parents when handled by .live()?

问题

I have 'Back Board' on my images and content over here: http://syndex.me So basically, you click on an image, it will overlay a info panel above the clicked content.

I want to do two things:

Click on the background of the site to fade out the currently opened info panel
Be able to click on a tag, link, or social icon within the info panel without triggering it's parent function, which is too fade out again.

I cannot use stopPropagation for the child click being superseded by the parent click as i need the click events to be handled by .live() (see documentation) This is due to the fact that posts are being dynamically loaded.

I cannot just say something like: $("#Background").click(function(){//fade out the Info Board} Because that is being covered by the entire post wrapper, and i can't put an event ont hat because then I'm even deeper in the dilemma of parents taking over children's events :-)

So far I'm at least able to have just one infoboard open (i.e I click on one image, then another, it will close the already opened one, and open the current one. So this part is all good:

    $('.theContent:not(.clicked)').live("click", function () {
            $(this).children('.postInfo').fadeIn(400);
            $(".clicked").each(function() {
                    $(this).find('.postInfo').fadeOut(400);
                    $(this).removeClass('clicked');
            });
        $(this).addClass("clicked");
 });
     $('.clicked').live("click", function () {
            $(".clicked").each(function() {
                $(this).find('.postInfo').fadeOut(400);
                $(this).removeClass('clicked');
            });
 });

Re .live(), .delegate() and .stopPropogation():

Since the .live() method handles events once they have propagated to the top of the document, it is not possible to stop propagation of live events. Similarly, events handled by .delegate() will propagate to the elements to which they are delegated; event handlers bound on any elements below it in the DOM tree will already have been executed by the time the delegated event handler is called. These handlers, therefore, may prevent the delegated handler from triggering by calling event.stopPropagation() or returning false.

回答1:

How about simply checking whether the event actually took place on the specific element:

function activate(el) {
    el.find('.postInfo').fadeIn(400);
    el.addClass('clicked');
}
function deactivate(el) {
    el.find('.postInfo').fadeOut(400);
    el.removeClass('clicked');
}
$('.theContent:not(.clicked)').live('click', function(e) {
    deactivate($('.clicked'));
    activate($(this));
});

$('.clicked').live("click", function(e) {
    if (! $(e.target).is('a')) {
        // this should not trigger if a click occured on one of the links
        deactivate($(this));
    }
});

$('#ape').click(function(e) {
    if ($(e.target).is('#ape')) {
        deactivate($('.clicked'));
    }
});

回答2:

Have you thought about binding the click event when the post is dynamically loaded? This way you can use stopPropagation().

http://jsfiddle.net/rkw79/CzEj5/

回答3:

If you bind the event to a parent element, it won't stop its propagation event to it's childrens.

You have two solutions, to bind an event to every children and put THERE the stop propagation call, or just test who ired the click event in the parent. I prsonaly find more elegant the second solution.

You can read something more about it here : http://redfishmemories.blogspot.it/2014/08/jquery-prevent-event-propagation-and.html

来源：https://stackoverflow.com/questions/7961418/is-it-possible-to-stop-child-click-events-propagating-to-parents-when-handled-by

标签

html

jquery

nested