Creazione di un evento che attiva un secondo evento

Question

Sto provando a creare un evento jQuery che attiva un secondo evento. Il primo evento fa clic sull'id emoji che si riferisce a un'immagine. Il secondo è un evento in mousemove che sposta l'immagine attorno alla pagina. Il terzo evento interrompe questo evento quando il clic del mouse si ripete ovunque nel corpo della pagina e posiziona l'immagine in quella posizione assoluta. Sono riuscito a far funzionare il secondo e il terzo evento ma non riesco a far funzionare il primo evento con il secondo. Ecco quello che ho finora per il mio 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

Inizializzare l'evento dall'interno della prima chiamata di evento.

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

Answer 2

Durante il clic su #emoji viene attivato anche il click del corpo. Questo porta alla chiamata stop(). La propagazione di tale evento a body può essere bloccata da event.stopPropagation() (o equivalente restituito false da begin()). La propagazione dovrebbe essere interrotta manualmente anche se body sul gestore dei clic è collegato in begin().

È possibile che si desideri l'utilizzo una tantum di alcuni eventi. Questo può essere fatto legando usando .one(). In tal caso il gestore viene rimosso dopo il primo utilizzo senza manuale .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);