Question

我的图片和内容上有'Back Board'：http://syndex.me 所以基本上，你单击一个图像，它将覆盖点击内容上方的信息面板。

我想做两件事：

点击网站背景以淡出当前打开的信息面板
可以点击信息面板中的标签，链接或社交图标，而不会触发它的父功能，这会再次淡出。

我无法使用stopPropagation让父点击取代子点击，因为我需要点击事件由.live（）(see documentation)处理。这是因为帖子是动态加载的。< / p>
我不能只说： $（“＃Background”）。click（function（）{//淡出信息板} 因为整个帖子包装都涵盖了这一点，我不能把事件放在帽子上，因为那时我甚至更深入地了解了父母接管儿童事件的困境： - ）

到目前为止，我至少只能打开一个infoboard（即我点击一个图像，然后是另一个图像，它将关闭已经打开的图像，并打开当前的图像。所以这部分都很好：< / p>
$('.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（）和.stopPropogation（）：

由于.live（）方法在事件传播到文档顶部后处理事件，因此无法停止实时事件的传播。同样，.delegate（）处理的事件将传播到它们被委派给的元素;在DOM树中它下面的任何元素上绑定的事件处理程序将在调用委托事件处理程序时执行。因此，这些处理程序可以通过调用event.stopPropagation（）或返回false来阻止委托处理程序触发。

Answer 1

如何简单地检查事件是否实际发生在特定元素上：

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

Answer 2

动态加载帖子时，您是否考虑过binding点击事件？这样你就可以使用stopPropagation（）。

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

Answer 3

如果您将事件绑定到父元素，它就不会将其传播事件停止到它的子元素。

您有两个解决方案，即将事件绑定到每个子节点并将其置于停止传播调用，或者仅测试父节点中的click事件。我prsonaly发现更优雅的第二个解决方案。

您可以在此处阅读更多相关信息： http://redfishmemories.blogspot.it/2014/08/jquery-prevent-event-propagation-and.html

在.live（）处理时，是否可以阻止传播给父项的子点击事件？

3 个答案: