使用click事件绑定mousemove（）(bind mousemove() with click event)

使用click事件绑定mousemove（）(bind mousemove() with click event)

我想在触发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); } } }

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

I would like to re-attach mousemove() after a click event is fired. I am using jquery off/on to handle this functionality. The mousemove is turned off when a html element is displayed. The on is invoked when the user clicks a button. The off() works as expected, but I am not successfully reattaching the event when the button is clicked.

$(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'); } }

I tired wrapping the mousemove() into a function and calling it, but it is not working.

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

What is the correct way to accomplish this functionality?

最满意答案

如果您发现某些内容无法正常工作，我建议您将所需的操作分成较小的功能。 然后，您可以单独测试这些功能，然后将它们组合在一起以获得所需的结果。

例如，我将创建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事件往往会经常发生。

If you find something isn't working, my advice is to separate your desired actions into smaller functions. You can then test those functions individually and then combine them together to achieve your desired result.

For example, I would create 3 functions, addMouseMoveListener(), removeMouseMoveListener(), and 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); }

After testing each of these individual functions, you can organize them in your code to be called at the appropriate times.

$(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(); }); });

Note: I left out the code for your checking the modal's CSS. Instead, you may be able to add/remove the mousemove event handler at the same time that you hide/show the modal element. You could ignore this suggestion and put your CSS check code inside your onMouseMoveHandler(ev) method, but you might experience a performance issue since mousemove events tend to fire very often.