Question

我想在触发click事件后重新附加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事件往往会经常发生。

Answer 2

如果我认为你的想法正确，例如改变/撤销clickevents：这是copepen（http://codepen.io/f7o/pen/jrBrWx）

on load：console记录鼠标移动点击测试链接：鼠标移动不再被跟踪

如果您使用jQuery，请确保在点击某个按钮buttonEvents时调用$('#someButton').click(...)功能

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);

使用click事件绑定mousemove（）

4 个答案: