jQuery + stopPropagation:从父选择器中排除子元素

Question

基于可接受答案的最终工作代码

        $('#photo-upload, #photo-upload .close').click(function(){
            $('#photo-upload').removeClass('show');
        });

        $('#upload-button').click(function(){
            $('#photo-upload').addClass('show');
        });

        $('#form-window').click(function(e){
              e.stopPropagation();
        });

原始问题

我有一个带关闭按钮的模态窗口。窗口由链接a#upload-button触发。#photo-upload是一个100%的高度+宽度固定的div。#form-window是一个200 box×200 box框，它在#photo-upload内水平和垂直地居中。

<div id="photo-upload">
    <div id="form-window">
        <!-- Content -->
        <a class="close"></a>
    </div>
</div>

关闭按钮绝对定位在右上角以外的一点位置。我想设置一个单击函数，以便在模式窗口外单击关闭窗口，并使单击“关闭”按钮关闭窗口。但是，点击窗口本身不会关闭窗口。

我目前的代码是：

$('#photo-upload').click(function(e){
    if(!$(e.target).is('#form-window')){
      return false;
    } else {
        $(this).removeClass('show');
    }
});

$('#form-window').live("click",function(e){
    if(!$(e.target).is('a.close')){
      e.stopPropagation();
    }
});


$('#upload-button').live("click", function(){
    $('#photo-upload').addClass('show');
});

$('#photo-upload .close').live("click", function(){
    $('#photo-upload').removeClass('show');
});

使用上面的代码，当我单击其中任何一个元素并且无法关闭div时，都不会发生任何事情。我做错了什么？

如何在父元素上使用stopPropagation()，但排除子元素(在我的例子中是a.close)。

Answer 1

只需向“关闭”按钮添加一个额外的处理程序，该按钮也会关闭窗口。

$(".close").live('click',function(){
            $('#form-window').removeClass('show');
        });

理想情况下，您可能希望在.close之外实际添加document选择器，并且只使用该函数一次，以避免代码重复。

Answer 2

检查target是否不是form-window click处理程序中的关闭链接。它不停止event propagation，否则让文档click处理程序处理rest。尝尝这个

    $(document).live('click',function(){
        $('#form-window').removeClass('show');
    });

    $('#form-window').live("click",function(e){
        if(!$(e.target).is('a.close')){
          e.stopPropagation();
        }
    });