jquerys'e.stopPropagation(）无法获得所需的功能

jquerys' e.stopPropagation() cannot get required functionality

本文关键字：功能 stopPropagation jquerys      更新时间：2023-09-26

下面的photoContainer有子级。这还可以，但如果我点击它的任何子级，代码就会执行，隐藏blackLayer并删除photoContainer。如何防止这种情况发生，并且在单击photoContainer子对象以外的任何位置时执行？

谢谢。

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

我认为问题是您正在停止事件在父元素上的传播，您希望停止事件在#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();
});

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

下面是一个演示：http://jsfiddle.net/J9dBS/2/（注意，如果您点击"子"元素，则不会显示警报）

我想指出的是，.live()自jQuery 1.7起已弃用。如果您使用的是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>);
相关文章：