Question

在父div的Click事件中，我返回一个关闭我的叠加div的函数，如下所示

$('div#overlayBackground').click(function() {
            return clicker();
        });

使用.innnerHTML填充此div的子元素，并在document.ready()上为子元素点击功能，如下所示：

$('#CaptionTextArea').live('click', function(e) {
             e.stopPropagation();
        });

因此点击TextArea不会关闭叠加层。但是子元素click从不运行，而父div click总是运行，感谢任何帮助。

Answer 1

.live()方法绑定文档级别的事件处理程序。当事件冒泡到文档jQuery然后检查它是否发生了您指定的元素。因此，如果您将其他事件处理程序绑定到事件发生的元素附近，并且这些处理程序停止事件传播，则永远不会调用基于.live的处理程序。如果您的clicker()函数返回false，则会停止传播。

您可以尝试这样做：

$('div#overlayBackground').on("click", "#CaptionTextArea", function(e) {
    e.stopImmediatePropagation();
}).on("click", function(e) {
    return clicker();
});

也就是说，使用.on()方法替换.live()，以便事件处理程序实际上绑定到与其他单击事件相同的父元素。 jQuery按照绑定的顺序调用事件处理程序，因此将首先调用此.live()替换，并且可以使用event.stopImmediatePropagation()来防止第二个运行。

Answer 2

在jQuery库中不推荐使用

.live()，因此您不应该使用它。其中一个原因是事件必须一直传播到要处理的根级别，因此stopPropagation在那里是无用的。 更好的解决方案是在同一个父点击处理程序中处理案例：

$('div#overlayBackground').click( function(e) {
    if( e.target.id != 'CaptionTextArea' )
        return clicker();
});

由于#CaptionTextArea（a <textarea>）没有任何子项可以传播点击事件，因此效果很好;但总的来说，您也希望处理来自其后代的事件：

// ignore clicks which originated within #CaptionTextArea
if( $(e.target).closest('#CaptionTextArea').length === 0 )

子元素实时。（'click'）永远不会运行父div的Click总是运行

2 个答案: