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像素乘200像素的盒子，水平和垂直居中于#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

检查target是否不是form-window click处理程序中的关闭链接。它不会阻止event propagation让文档click处理程序处理休息。试试这个

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

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

Answer 2

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

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

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

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

2 个答案: