Question

下面的{p> photoContainer有孩子。这样可以正常工作，但如果我点击任何一个子代码执行，隐藏blackLayer并删除photoContainer。我如何防止这种情况发生，但是当我点击photoContainer个孩子的任何地方时，我可以执行此操作？

感谢。

$('div#photoContainer').live('click', function (e) {
    e.stopPropagation();
    var blackLayer = $('div#blackLayer');
    if (blackLayer.length) {
        blackLayer.fadeOut();
    }
    $(this).remove();
});

Answer 1

我认为问题在于您要停止在父元素上传播事件，您希望停止在#photoContainer元素的子元素上传播事件，以便它不会传播到#phoeoContainer元素：

$('#photoContainer').live('click', function (e) {
    var blackLayer = $('div#blackLayer');
    if (blackLayer.length) {
        blackLayer.fadeOut();
    }
    $(this).remove();
});
$('#photoContainer > div').live('click', function (event) {
    event.stopPropagation();
});

在div元素的子#photoContainer触发点击事件时，这将停止点击事件的传播。

以下是演示：http://jsfiddle.net/J9dBS/2/（请注意，如果单击“子”元素，则不显示警报）

我想要注意的是，从jQuery 1.7开始，.live()已被弃用。如果您使用的是jQuery 1.7或更高版本，则建议使用.on()，如下所示：

$(<root-element>).on(<event>, <selector>, <event-handler>)

或者，如果您使用jQuery 1.4.2到jQuery 1.6.4，那么建议您使用.delegate()：

$(<root-element>).delegate(<selector>, <event>, <event-handler>);

jquery'e.stopPropagation（）无法获得所需的功能

1 个答案: