Erstellen eines Ereignisses, das ein zweites Ereignis auslöst

Question

Ich versuche ein jQuery-Ereignis zu erstellen, das ein zweites Ereignis auslöst. Das erste Ereignis ist das Klicken auf die Emoji-ID, die auf ein Bild verweist. Die zweite ist ein Mousemove-Ereignis, das das Bild um die Seite bewegt. Das dritte Ereignis stoppt dieses Ereignis, wenn der Mausklick erneut irgendwo im Hauptteil der Seite stattfindet und das Bild an dieser absoluten Position platziert. Ich konnte die zweite und die dritte Veranstaltung zum Laufen bringen, aber ich kann die erste Veranstaltung nicht mit der zweiten Veranstaltung verbinden. Hier ist, was ich bisher für meine jQuery:

var mouseTracker = function(event) { 
console.log(event.pageX, event.pageY, !!event.which) 
$('#emoji').css('top', event.pageY); 
$('#emoji').css('bottom', event.pageY); 
$('#emoji').css('left', event.pageX); 
$('#emoji').css('right', event.pageX); 
} 

var begin = function() { 
$('body').on('mousemove', mouseTracker); 
$('body').css('cursor', 'none'); 
} 

var stop = function() { 
$('body').off('mousemove', mouseTracker); 
$('#emoji').css('postion', 'absolute') 
$('body').css('cursor', 'default'); 
} 

$('#emoji').on('click', begin); 
$('body').on('click', stop);` 

Answer 1

Initialisieren Sie das Ereignis aus dem ersten Ereignis aufrufen.

$('#emoji').on('click', function() { 
    begin(); 
    $('body').on('click', stop); 
}); 

Answer 2

Während der Klick auf #emoji der Körper Klick wird auch ausgelöst. Das führt zum Aufruf stop(). Die Ausbreitung dieses Ereignisses auf body kann durch event.stopPropagation() (oder gleichwertige Rückgabe false von begin()) blockiert werden. Die Übertragung sollte manuell gestoppt werden, auch wenn body auf Click-Handler in begin() angefügt ist.

Möglicherweise möchten Sie einige Ereignisse nur einmal verwenden. Dies kann durch Bindung unter Verwendung von .one() erfolgen. In diesem Fall wird die Prozedur nach der ersten Benutzung ohne manuelle abgelöst .off():

var begin = function (event) {   
    $('body').on('mousemove', mouseTracker); 
    $('body').one('click', stop); 
    $('body').css('cursor', 'none'); 
    return false; // event.stopPropagation(); 
} 

var stop = function() { 
    $('#emoji').one('click', begin); 
    $('body').off('mousemove', mouseTracker); 
    $('#emoji').css('postion', 'absolute') 
    $('body').css('cursor', 'default'); 
} 

$('#emoji').one('click', begin);