将mousemove（）与click事件绑定

Question

我想在触发click事件后重新附加mousemove（）。 我使用开/关jQuery来处理此功能。 显示html元素时，mousemove将关闭。 用户单击按钮时将调用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事件往往会频繁触发，因此您可能会遇到性能问题。

Answer 2

如果我认为您的想法正确，请更改/撤消clickevents的示例：这是copepen（ http://codepen.io/f7o/pen/jrBrWx ）

加载时：控制台记录单击测试链接时的鼠标移动：不再跟踪鼠标移动

如果您使用的是jQuery，请确保在单击某些按钮$('#someButton').click(...)调用buttonEvents函数

Answer 3

在您的代码错误中-userActivity是循环回调。 每一个举动都诞生了新的举动列表器。 改成：

$(document).ready(function() {
    var userActivity = function() {
        console.log("The mouse moved");
    }
    $(document).on('mousemove', userActivity);
    $('.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 4

.on()函数至少需要两个参数。 第一个是您要侦听的事件的名称，第二个是在触发事件时应调用的函数。 （请参阅http://api.jquery.com/on/ ）

因此，第一个示例中的$(document).on('mousemove')不会安装任何事件处理程序。

一种解决方案是命名事件处理程序。

function myEventHandler() {
  document.log("The mouse moved");
}
// ...
$(this).mousemove(myEventHandler);
// ...
$(document).on('mousemove', myEventHandler);