jQuery航点 - 我可以在同一页面上两次使用航点吗？ （看起来像其他一组航路点触发其他航路点）

Question

我不确定我做错了什么，但我有很多部分，有些部分有子部分。

  <section id="section-one" class="section-top"></section>
  <section id="section-two" class="section-top"></section>
  <section id="section-three" class="section-top">
    <article id="sub-section-one" class="section-sub"></article>
    <article id="sub-section-two" class="section-sub"></article>
    <article id="sub-section-three" class="section-sub"></article>
    <article id="sub-section-four" class="section-sub"></article>
  </section>

所以我设置了两个航点调用来执行section-top与section-sub

上的不同任务

$(document).ready(function(){
  $('.section-top').waypoint(function(e,d){
    // Do something
  });

  $('.section-sub').waypoint(function(e,d){
    // Do something else
  });
});

然而，当我滚动浏览section-sub航点时，它仍会触发section-top，更糟糕的是，它似乎是用自己的航路点触发section-top，所以没有办法告诉它不要对section-sub触发器采取行动。

如果你看this jsbin，你可以看到在第一组航路点中调用trigger-count，但在滚动航点的子集时它会不断上升。

它是如何运作的，我做错了吗？ （我不应该两次登记航点吗？）

Answer 1

行。在jQuery航点的创建者的帮助下，Caleb提到发生这种情况的原因是由于jQuery冒泡自定义事件。

解决方案是将e.stopPropagation()放入第二个航路点初始化。

Github issue 114