HeadroomJS-函数在选项内触发两次

Question

我正在使用HeadroomJS（https://wicky.nillia.ms/headroom.js/）来检测滚动位置在顶部还是顶部。

在"onTop"和"onNotTop"选项中，我声明了一个.on('click事件。

当用户不在页面顶部并且被击中menuTrigger时，两者 $(menuTrigger).on('click touchstart', function (e) {事件仍在运行。

您可以在代码中看到，console.log('b2');在每个headroomjs选项中声明一次。但是在我的控制台中，它显示了两次，这意味着两个菜单触发功能都在运行。

// Construct headroom instance
  headroom  = new Headroom(primaryHeader, {
    "onTop" : function() {
      // Dynamically update the src="" of the brand-image using the data attributes of dark/light logo url's. Depending on the boolean value returned from the helper function. Checks if the 'primary-logo-color' attribute is "dark" or "light". Triggers only when scrolled to top.
      if ( primary_header_007_logo_color( primaryLogoColor ) ){
        $('.primary-header__brand-image').attr("src", lightLogoSrc);
        console.log('a1');
      } else {
        $('.primary-header__brand-image').attr("src", darkLogoSrc);
        console.log('a2');
      }

      $(menuTrigger).on('click touchstart', function (e) {
        if ($(checkMenu).is(".primary-header.is-expanded")) {

          if ( primary_header_007_logo_color( primaryLogoColor ) ){
            $('.primary-header__brand-image').attr("src", darkLogoSrc);
            console.log('b1');
          } else {
            $('.primary-header__brand-image').attr("src", lightLogoSrc);
            console.log('b2');
          }

        } else {

          if ( primary_header_007_logo_color( primaryLogoColor ) ){
            $('.primary-header__brand-image').attr("src", lightLogoSrc);
            console.log('c1');
          } else {
            $('.primary-header__brand-image').attr("src", darkLogoSrc);
            console.log('c2');
          }

        }

        // Prevent touch events from triggering click events and this process looping
        e.preventDefault();
      });
    },

    // Dynamically update the src="" of the brand-image using the data attributes of dark/light logo url's. Depending on the boolean value returned from the helper function. Checks if the 'primary-logo-color' attribute is "dark" or "light". Triggers only when not scrolled to top.
    "onNotTop" : function() {
      if ( primary_header_007_logo_color( primaryLogoColor ) ){
        $('.primary-header__brand-image').attr("src", darkLogoSrc);
        console.log('a1');
      } else {
        $('.primary-header__brand-image').attr("src", lightLogoSrc);
        console.log('a2');
      }

      $(menuTrigger).on('click touchstart', function (e) {
        if ($(checkMenu).is(".primary-header.is-expanded")) {

          if ( primary_header_007_logo_color( primaryLogoColor ) ){
            $('.primary-header__brand-image').attr("src", darkLogoSrc);
            console.log('b1');
          } else {
            $('.primary-header__brand-image').attr("src", lightLogoSrc);
            console.log('b2');
          }

        } else {

          if ( primary_header_007_logo_color( primaryLogoColor ) ){
            $('.primary-header__brand-image').attr("src", darkLogoSrc);
            console.log('c1');
          } else {
            $('.primary-header__brand-image').attr("src", lightLogoSrc);
            console.log('c2');
          }

        }

        // Prevent touch events from triggering click events and this process looping
        e.preventDefault();
      });

    },
  });