Question

我在点击事件上创建了一个简单的slideToggle效果，但是＆＃39; .close＆＃39;事件正在产生泡沫。 unbind（）和stopImmediatePropagation（）都有效，但我不明白为什么e.stopPropagation（）不会起作用。另一个问题是为什么会关闭＆＃39;点击事件触发两次？点击几次联系按钮，然后点击“关闭”按钮。你会看到的。 jsfiddle

<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.

Answer 1

您一次又一次订阅相同的活动。订阅事件不会覆盖现有订阅。

每次按下Contact Me按钮，都会调用show功能。
每次调用函数show时，都会调用函数close。
每次调用函数close时，都会向＆＃39; X＆＃39;添加另一个监听器。按钮。

结果是，如果您已按两次Contact Me，则会有两个匿名函数收听X按钮。

这里有两种替代方法：

有一个名为toggleState的函数。它必须记住它当前的状态，并在调用函数时相应地打开或关闭。然后，您必须只订阅一次每个事件。
已命名函数而非匿名函数，并在适当时间使用jQuery.off取消订阅事件。

为什么父母的兄弟姐妹会冒泡？

1 个答案: