Question

可能重复：
Prevent click event from affecting parent jquery

我有一个类似于此的DOM结构：

<div class="parent">
   <div class="child">

   </div>
</div>

我有以下jQuery：

$('.parent').click(function(){
    $(this).hide();
});

点击.child后，我不希望隐藏父级，但显然因为.child是.parent的孩子，这自然会发生。我试过添加这个：

$('.child').click(function(e){
    e.stopPropagation();
});

但它仍然无效。我也尝试用e.stopPropagation

替换return false;

有什么建议吗？

JSFiddle

Answer 1

这绝对有效，请参阅我的fiddle代码。尝试单击绿色div。如果它在您的网站上不起作用，则还有其他问题。

Answer 2

好吧，这是解决方案：小提琴：http://jsfiddle.net/mPUTe/1/ 。
不要将事件侦听器绑定到.pu_container。相反，请检查e.target点击监听器上的.pu_bg是否具有课程pu_container。如果是，请返回。

 (function($) {
    $.fn.show = function() {
        return this.each(function() {
            var link = $(this);
            link.click(function(e) {
                $('body').append('<div class="pu_bg">');
                $('.pu_bg').css({
                    'opacity': 0.5
                }).on('click', function(e) {
                    if($(e.target).hasClass('pu_container')) return; //<--Magic?
                    $(this).fadeOut(function(){
                        $(this).remove();    
                    });
                });;
                $('.pu_bg').append('<div class="pu_container">');
                e.preventDefault();
            });
        });
    };
})(jQuery);

jquery点击一个孩子忽略父点击

2 个答案: