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 像素 x 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();
        }
    });