Javascript 为什么有一个泡沫为家长'；她的兄弟姐妹？

我在单击事件上创建了一个简单的滑动切换效果，但“.close”事件正在生成气泡。unbind（）和stopImmediatePropagation（）都有效，但我不明白为什么e.stopPropagation（）不起作用。 另一个问题是为什么“关闭”点击事件会触发两次？ 点击联系按钮几次，然后点击“关闭”，您将看到

X
联系我
联系我
变量形式={
容器：$（“.container”），
init:function（）{
美元（“.contact.button”）。点击（'click'，this.show）；
},
show:function（）{
形式.容器.滑动开关（150）；
form.close（）；
},
关闭：函数（）{
$（'.close'）。在（'click'，函数（e）上{
形式.容器.滑动开关（150）；
//停止即时复制（）和解除绑定（）工作；
//但是为什么e.stopPropagation（）在这里不起作用？
});
}
};
form.init（）；
我可能会错误地说点击事件正在制造泡沫，因为这两个元素没有直接的关系。我只是不知道这里出了什么问题。

您正在一次又一次地订阅相同的事件。订阅事件不会覆盖现有订阅

• 每次按下

  联系我

  按钮时，都会调用

  显示

  功能
• 每次调用函数

  show

  ，都会调用函数

  close

• 每次调用函数

  close

  ，都会向“X”按钮添加另一个侦听器

结果是，如果您按了两次

联系我

，将有两个匿名函数监听

X

按钮

这里有两种替代方法：

• 有一个名为

  toggleState

  的函数。它必须记住当前的状态，并在调用函数时相应地打开或关闭。然后，您必须只订阅每个事件一次

• 使用命名函数而不是匿名函数，并在适当的时间使用

  jQuery.off

  取消订阅事件

---

这里是初学者。我不明白3号关在哪里。只有form.close（）在show方法中调用了它。我如何理解它？@user2734550-show方法被多次调用。我已经更新了我的答案，试图更加清晰

<div class="container">
    <div class="close">X</div>
    <h3>Contact me</h3>
</div>
<button class="contact">Contact me</button>

var form = {
    container: $('.container'),

    init: function() {
        $(".contact.button").on('click', this.show);
    },
    show: function(){
            form.container.slideToggle(150);
            form.close();
    },
    close: function() {
        $('.close').on('click', function(e){
            form.container.slideToggle(150);
            // stopImmediatePropagation() and unbind() works; 
            // but why e.stopPropagation() does not work here?
        });
    }
};

form.init();

I could be wrong saying the click event is making bubble, because both elements don't have immediate relationship. I just don't know what is wrong here.