javascript - 如何多次运行鼠标滚轮事件监听器？

Question

当用户激活鼠标滚轮时，我的脚本从其他 html 页面加载数据。

它应该像这样工作。向上滚动，将 contact.html 加载到 home.html 中，再次向上滚动，将 legal.html 加载到 home.html.但现在它只加载一次，因为鼠标滚轮事件监听器只工作一次。

在新页面加载到 home.html 后，如何让我的脚本再次监听鼠标滚轮？

javascript

$(document).ready(function() {
   bind_events();
   $(window).resize(function() {
      adjust_div_height();
   });
   adjust_div_height();
});

function bind_events() {
   var elem = $('.div-scrollable')[0];
   hammertime = new Hammer(elem);
   hammertime.get('swipe').set({ direction: Hammer.DIRECTION_VERTICAL 
});

hammertime.on("swipeup", function(ev) {
   load_page('next');
   adjust_div_height();
});

hammertime.on("swipedown", function(ev) {
    load_page('previous');
    adjust_div_height();
});

addWheelListener(elem, function(e) {
    var scrollUp = e.deltaY > 0;
    var scrollDown = e.deltaY < 0;

    if (scrollUp) {
        load_page('next');
    } else if (scrollDown) {
        load_page('previous');
    }
  });
}

function load_page(page_to_load) {
   // load contact page data
   var loadContactPage = $('#loaded_content').load('contact.html #contact');
   var loadHomePage = $('#loaded_content').load('home.html #home');
   var homeIsCurrentPage = "$('#home').length)";
   var contactIsCurrentPage = "$('#contact').length)";
   var legalIsCurrentPage = "$('#contact').length)";

   if (homeIsCurrentPage) {
      var next = loadContactPage;
      update_url('contact.html'); 
      console.log('contact page was loaded!');
   } 

   if (contactIsCurrentPage) {
      var next = loadLegalPage;
      update_url('legal.html'); 
      console.log('legal page was loaded!');
   } 

   if (legalIsCurrentPage) {
      var previous = loadContactPage;
      update_url('contact.html'); 
      console.log('contact page was loaded!');
   } 

wheel_listener.js

// creates a global "addWheelListener" method
// example: addWheelListener( elem, function( e ) { console.log( 
e.deltaY ); e.preventDefault(); } );
(function(window, document) {

var prefix = "",
    _addEventListener, support;

// detect event model
if (window.addEventListener) {
    _addEventListener = "addEventListener";
} else {
    _addEventListener = "attachEvent";
    prefix = "on";
}

// detect available wheel event
support = "onwheel" in document.createElement("div") ? "wheel" : // Modern browsers support "wheel"
    document.onmousewheel !== undefined ? "mousewheel" : // Webkit and IE support at least "mousewheel"
    "DOMMouseScroll"; // let's assume that remaining browsers are older Firefox

window.addWheelListener = function(elem, callback, useCapture) {
    _addWheelListener(elem, support, callback, useCapture);

    // handle MozMousePixelScroll in older Firefox
    if (support == "DOMMouseScroll") {
        _addWheelListener(elem, "MozMousePixelScroll", callback, useCapture);
    }
};

function _addWheelListener(elem, eventName, callback, useCapture) {
    elem[_addEventListener](prefix + eventName, support == "wheel" ? callback : function(originalEvent) {
        !originalEvent && (originalEvent = window.event);

        // create a normalized event object
        var event = {
            // keep a ref to the original event object
            originalEvent: originalEvent,
            target: originalEvent.target || originalEvent.srcElement,
            type: "wheel",
            deltaMode: originalEvent.type == "MozMousePixelScroll" ? 0 : 1,
            deltaX: 0,
            deltaY: 0,
            deltaZ: 0,
            preventDefault: function() {
                originalEvent.preventDefault ?
                    originalEvent.preventDefault() :
                    originalEvent.returnValue = false;
            }
        };

        // calculate deltaY (and deltaX) according to the event
        if (support == "mousewheel") {
            event.deltaY = -1 / 40 * originalEvent.wheelDelta;
            // Webkit also support wheelDeltaX
            originalEvent.wheelDeltaX && (event.deltaX = -1 / 40 * originalEvent.wheelDeltaX);
        } else {
            event.deltaY = originalEvent.deltaY || originalEvent.detail;
        }

        // it's time to fire the callback
        return callback(event);

    }, useCapture || false);
}

})(window, document);

Answer 1

我可以理解您在代码上尝试的内容。

快速说明一下，您的代码对我来说并不透明。所以，我无法模拟

• addWheelListener 函数已定义但未使用。我想你忘了发布它。
• adjust_div_height 函数已使用但未定义。
• 与 update_url、loadContactPage 和 loadLegalPage 相同。

我尝试在代码片段上添加尽可能多的内容，如下所示。

如果您需要更多帮助，请检查并告诉我。

谢谢

$(document).ready(function () {
  bind_events();
  $(window).resize(function () {
    adjust_div_height();
  });
  adjust_div_height();
});

function bind_events() {
  var elem = $('.div-scrollable')[0];

  hammertime = new Hammer(elem);
  hammertime.get('swipe').set({
    direction: Hammer.DIRECTION_VERTICAL
  });

  hammertime.on("swipeup", function (ev) {
    load_page('next');
    adjust_div_height();
  });

  hammertime.on("swipedown", function (ev) {
    load_page('previous');
    adjust_div_height();
  });

  addWheelListener(elem, function (e) {
    var scrollUp = e.deltaY > 0;
    var scrollDown = e.deltaY < 0;

    if (scrollUp) {
      load_page('next');
    } else if (scrollDown) {
      load_page('previous');
    }
  });
}

function adjust_div_height() {
  console.log('Adjust Div height function should be here.');
}

function addWheelListener(elem, callback) {
  elem.addEventListener("wheel", callback);
}

function update_url(url) {
  console.log('Update url to <' + url + '>');
}

function load_page(page_to_load) {
  console.log('Scrolled to <' + page_to_load + '> page!');
  
  // load contact page data
  var loadContactPage = $('#loaded_content').load('contact.html #contact');
  var loadHomePage = $('#loaded_content').load('home.html #home');
  var homeIsCurrentPage = "$('#home').length)";
  var contactIsCurrentPage = "$('#contact').length)";
  var legalIsCurrentPage = "$('#contact').length)";

  if (homeIsCurrentPage) {
    var next = loadContactPage;
    update_url('contact.html');
    console.log('contact page was loaded!');
  }

  if (contactIsCurrentPage) {
    var next = loadLegalPage;
    update_url('legal.html');
    console.log('legal page was loaded!');
  }

  if (legalIsCurrentPage) {
    var previous = loadContactPage;
    update_url('contact.html');
    console.log('contact page was loaded!');
  }
}

function loadContactPage() { /* Load Contact Page */ }
function loadLegalPage() { /* Load Legal Page */ }

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://hammerjs.github.io/dist/hammer.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script>
</head>
<body>
  <div id="home">Home</div>
  <div class="div-scrollable" style="height: 200px; background: red;">
    This is scrollable Div
  </div>
</body>
</html>