javascript - 将 mousemove() 与单击事件绑定(bind)

Question

我想在单击事件触发后重新附加 mousemove() 。我正在使用 jquery off/on 来处理此功能。当显示 html 元素时，鼠标移动将被关闭。当用户单击按钮时，将调用 on。 off() 按预期工作，但单击按钮时我没有成功重新附加事件。

$(document).ready(function() {
  $(this).mousemove(function(e) {
    console.log("The mouse moved");
  });  
});

function buttonEvents(){
  $('.reset').click(function() {
    modal.hide();
    $(document).on('mousemove');
    console.log('The mouse moved.');
  });
  $('.close').click(function() {
    modal.hide();  
  });

  if($('.photoCnt').css('display') === 'block'){
    $(document).off('mousemove');
  }
}

我厌倦了将 mousemove() 包装到一个函数中并调用它，但它不起作用。

function userActivity(){
  $(this).mousemove(function(e) {
    console.log("The mouse moved");
  });

  function buttonEvents(){
    $('.reset').click(function() {
      modal.hide();
      $(document).on('mousemove', userActivity);
      console.log('The mouse moved.');
    });
    $('.close').click(function() {
      modal.hide();  
    });

    if($('.photoCnt').css('display') === 'block'){
      $(document).off('mousemove', userActivity);
    }
  }
}

完成此功能的正确方法是什么？

Answer 1

如果您发现某些功能不起作用，我的建议是将您所需的操作分成更小的功能。然后，您可以单独测试这些功能，然后将它们组合在一起以获得您想要的结果。

例如，我将创建 3 个函数:addMouseMoveListener()、removeMouseMoveListener() 和 onMouseMoveHandler(ev)。

function addMouseMoveListener() {
    $(document).on('mousemove', onMouseMoveHandler);
    console.log("addMouseMoveListener() finished");
}

function removeMouseMoveListener() {
    $(document).off('mousemove', onMouseMoveHandler);
    console.log("removeMouseMoveListener() finished");
}

function onMouseMoveHandler(ev) {
    console.log("Mouse moved!", ev);
}

测试完每个单独的函数后，您可以在代码中组织它们，以便在适当的时间调用。

$(document).ready(function() {
    // initialize your button event handlers
    // turn on/off mousemove event handlers when desired

    $('.reset').click(function() {
        modal.hide();
        addMouseMoveListener();
    });
    $('.close').click(function() {
        modal.hide();
        removeMouseMoveListener();
    });

});

注意:我省略了用于检查模态 CSS 的代码。相反，您可以在隐藏/显示模式元素的同时添加/删除 mousemove 事件处理程序。您可以忽略此建议，并将 CSS 检查代码放入 onMouseMoveHandler(ev) 方法中，但您可能会遇到性能问题，因为 mousemove 事件往往会频繁触发。