クリックイベントでmousemove（）をバインド

Question

クリックイベントが発生した後にmousemove（）を再インストールしたいと思います。私はこの機能を扱うためにjqueryをオン/オフしています。 mousemoveはhtml要素が表示されるとオフになります。ユーザーがボタンをクリックするとonが呼び出されます。オフ（）は期待通りに機能しますが、ボタンをクリックしたときにイベントを正常に再接続していません。

$(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

何か問題が発生していることがわかった場合は、希望のアクションを小さな機能に分けることをおすすめします。これらの機能を個別にテストし、それらを組み合わせて目的の結果を達成することができます。

たとえば、私はaddMouseMoveListener(),removeMouseMoveListener()およびonMouseMoveHandler(ev)という3つの関数を作成します。

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イベントハンドラを追加/削除することができます。 この提案を無視して、onMouseMoveHandler(ev)メソッドの中にCSSチェックコードを入れることができますが、mousemoveイベントが頻繁に発生する傾向があるため、パフォーマンスの問題が発生する可能性があります。

Answer 2

私はclickeventsを取り消す/変更するには、あなたのアイデアの権利、例を考えてみた場合：ここで はcopepen（http://codepen.io/f7o/pen/jrBrWx）

は負荷にある：コンソールは、テストリンクのクリックにマウスを移動 をログに記録：マウスの移動を追跡されていませんもう

あなたはあなたのコードの間違いではいくつかのボタンを$('#someButton').click(...)

Answer 3

をクリックする上buttonEvents関数を呼び出すことを確認してくださいjQueryのを使用している場合 - 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()機能は、少なくとも2つの引数を期待しています。 1つは聞きたいイベントの名前で、2つ目はイベントが発生するたびに呼び出される関数です。 （http://api.jquery.com/on/を参照）

したがって、$(document).on('mousemove')は、最初の例ではイベントハンドラをインストールしません。

解決策の1つは、イベントハンドラに名前を付けることです。

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