Create an event that fires the second event

Question

I am trying to create a jQuery event that fires a second event. The first event is a click on the emoji identifier, which refers to the image. The second is the mousemove event, which moves the image around the page. The third event stops this event when a mouse click occurs again anywhere on the page body and places the image in this absolute position. I was able to get the second and third events, but I can not get the first event to work with the second. Here is what I have used so far for 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

Initialize an event from the first event call.

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

Answer 2

While clicking on #emoji a click on the body is also activated. This results in a stop() call. The propagation of this event to the body can be blocked by event.stopPropagation() (or equivalently returning false from begin() ). Distribution must be stopped manually, even if the body in the click handler is in begin() .

You may need a one-time use of certain events. This can be done by binding with .one() . In this case, the handler detaches after the first use without the .off() manual:

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