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

Why there is a bubbling for parent's siblings?

本文关键字：兄弟姐妹 父母 为什么      更新时间：2023-09-26

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

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

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

  • 每次按下Contact Me按钮时，都会调用函数show。
  • 每次调用函数show时，都会调用函数close。
  • 每次调用函数close时，您都会向"X"按钮添加另一个侦听器。

结果是，如果您按Contact Me两次，将有两个匿名函数侦听X按钮。

这里有两种替代方法：

  • 有一个名为 toggleState 的函数。它必须记住它当前处于什么状态，并在调用函数时相应地打开或关闭。然后，您只能订阅每个事件一次。

  • 使用命名函数而不是匿名函数，并在适当的时候使用 jQuery.off 取消订阅事件。

相关文章：