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