bind mousemove() mit click event

Question

Ich moechte mousemove() neu anfügen, nachdem ein Klick-Ereignis ausgelöst wurde. Ich verwende jquery off/on, um diese Funktionalität zu handhaben. Der Mauszeiger ist deaktiviert, wenn ein HTML-Element angezeigt wird. Das on wird aufgerufen, wenn der Benutzer auf eine Schaltfläche klickt. Das off() funktioniert wie erwartet, aber ich bin nicht erfolgreich das Ereignis erneut anfügen, wenn auf die Schaltfläche geklickt wird.

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

Ich müde, das MouseMove() in eine Funktion zu verpacken und es aufzurufen, aber es funktioniert nicht.

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

Was ist der richtige Weg, um diese Funktionalität zu erreichen?

Answer 1

Wenn Sie finden, dass etwas nicht funktioniert, ist mein Rat, Ihre gewünschten Aktionen in kleinere Funktionen zu trennen. Sie können diese Funktionen dann einzeln testen und dann kombinieren, um das gewünschte Ergebnis zu erzielen.

Zum Beispiel würde ich 3 Funktionen erstellen, addMouseMoveListener(), removeMouseMoveListener() und onMouseMoveHandler(ev).

Nach dem Testen jeder dieser einzelnen Funktionen können Sie sie in Ihrem Code organisieren, um zu den entsprechenden Zeiten aufgerufen zu werden.

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

}); 

Hinweis: Ich habe den Code für die Überprüfung der modalen CSS weggelassen. Stattdessen können Sie möglicherweise den MouseMove-Ereignishandler hinzufügen/entfernen, während Sie gleichzeitig das modale Element ein- und ausblenden. Sie könnten diesen Vorschlag ignorieren und Ihren CSS-Prüfcode in Ihre onMouseMoveHandler(ev)-Methode schreiben, aber es kann zu einem Leistungsproblem kommen, da Ereignisse mit der Mausbewegung sehr häufig ausgelöst werden.

Answer 2

Wenn ich Ihre Idee für richtig, beispielsweise zu ändern/Widerruf clickevents: Hier ist die copepen (http://codepen.io/f7o/pen/jrBrWx)

auf Last: Konsolenprotokolle Maus bewegen auf, klicken Sie auf Testlink: Mausbewegung wird nicht verfolgt mehr

Wenn Ihr mit jQuery Sie die buttonEvents Funktion stellen Sie sicher, rufen $('#someButton').click(...)

Answer 3

In Ihrem Code Fehler einige Schaltfläche geklickt werden - userActivity Kreis Rückruf ist. Jeder Zug dieser geborenen neuen Zuglistener. Wechseln zu:

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

Hoffnung, es funktioniert :)

Answer 4

Die .on() Funktion erwartet mindestens zwei Argumente. Der erste ist der Name des Ereignisses, das Sie hören möchten, und der zweite ist die Funktion, die immer aufgerufen werden sollte, wenn das Ereignis ausgelöst wird. (Siehe http://api.jquery.com/on/)

Daher $(document).on('mousemove') installiert keine Ereignishandler in Ihrem ersten Beispiel.

Eine Lösung besteht darin, Ihren Event-Handler zu benennen.

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