【问题标题】:how to ensure binding to hashChange event does not bubble?如何确保绑定到 hashChange 事件不会冒泡?
【发布时间】:2011-11-25 10:51:21
【问题描述】:

我正在尝试防止我的 hashChange 事件绑定冒泡。

我有这个:

$(window).bind('hashchange', function( e ) {
    console.log("hash fired");
    // run hashChange routine
    });

我的脚本管理页面上的面板,每个面板都有自己的历史堆栈。每次转换都会触发上述内容,但我在前向转换时阻止了 hashChange,因此我可以更深入地导航到面板中。在向后“转换”时,只有 hashChange 触发并且没有被阻止,所以我可以回去。

导航可能如下所示:

panel A, start down > page2
panel A, page2 down > page3
panel A, page3 up > page2
panel A, page2 up > start - hashChange fires twice here... 

一切正常(= hashChange 触发一次),直到我在初始设置之前到达页面。在最后一步,上面的 hashChange 绑定会触发两次。我一直试图在某处设置一个标志来阻止第二个 hashChange,但它并没有像我希望的那样工作。

问题:
如何保证这不会冒泡?我正在尝试这样的事情,但它不起作用:

var $blockBubblingHashes = 0;
$(window).bind('hashchange', function( e ) {       
   if ($blockBubblingHashes == 0) {
      // run hashChange routine
      $blockBubblingHashes = 1; 
      } else {
         $blockBubblingHashes = 0;
         }
    });

【问题讨论】:

    标签: javascript jquery events event-bubbling


    【解决方案1】:

    如果您希望事件处理程序只触发一次,您应该考虑使用one() 函数,它会在第一次执行后删除处理程序。

    $(window).one('hashchange', function( e ) {    
        console.log("hash fired");
        // run hashChange routine
    });
    

    如果您特别想停止事件冒泡,而不是删除处理程序,您应该检查事件对象的方法上的stopPropagation()stopImmediatePropagation()。不幸的是,我的印象是您将所有hashchange 处理程序绑定到window,并且jQuery 没有记录绑定到同一元素的事件处理程序的执行顺序;所以你没有可靠的方法知道哪个处理程序首先被调用。

    【讨论】:

    • @frequent:如果你将所有的hashchange 绑定到window,你必须使用stopImmediatePropagation(),但是“jQuery 没有记录顺序绑定到同一个元素的事件处理程序被执行;因此您无法可靠地知道首先调用哪个处理程序。"
    • 尝试绑定到 one() 和两个“propgrations”,所有结果都只会触发一个事件,之后函数会静默。没有帮助。因为我需要它触发“每个 hashChange 一次”
    • @frequent:我不完全确定你的目标是什么,所以希望其他人可以帮助你:)。
    • 好的。感谢您为我指出一些新的方向。我会想办法的。
    • 找到了。我的转换函数中的一个错误触发了另一个 hashChange 事件。我给你答案,因为你所有的观点都是有效的。再次感谢。
    猜你喜欢
    • 2017-05-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-11-29
    • 1970-01-01
    • 2019-07-11
    • 1970-01-01
    相关资源
    最近更新 更多