CODEWITHSUNDEEP
javascriptjqueryanimationevent-handling
nope
nope

Reputation: 177

Enabling and disabling Events in javascript

So basically I have an event that occurs at page load. it causes an image to follow your cursor, but on a click event I would like to disable this event, and then on a second click re-enable the mouse follow event

I tried just creating a toggle variable but it just seems to be freezing my image. Would .on() and .off() be appropriate here? I read the documentation but I am confused on how to implement them

I am confused as to how I would turn off an event i guess.

Jscript

    var enabled = true;

        $(document).ready(function() {
            $(document).mousemove(function() {
                if (enabled) {
                    $("#rocket").stop().animate({left:e.pageX, top:e.pageY});
                }
            });
            $(document).click(function() {
                enabled == !enabled;
            }); 
        });

Demo

Upvotes: 1

Views: 304

Answers (3)

Roko C. Buljan
Roko C. Buljan

Reputation: 206506

LIVE DEMO

var enabled = true;

$(function () {    
    var $rocket = $('#rocket');   
    $(document).mousemove(function (e) {
         if (enabled) {
                $rocket.css({left: e.pageX, top: e.pageY});
         }
     }).click(function () {
         enabled ^= 1;
     });
});

Instead of animate() use .css()

If you really want to add a sleek animation to your catching spacecraft:

LIVE DEMO with 'animation'

$(function () {  

    var $rocket = $('#rocket'),
        enabled = true,
        mX =0, mY =0,
        posX =0, posY =0,
        lazy = 20; // Smooth move

    $(document).mousemove(function(e){
        mX = e.pageX;
        mY = e.pageY;  
    }).click(function(){
        enabled^=1;
    });

    intv = setInterval(function(){
        if(enabled){
            posX += (mX-posX) / lazy; // zeno's paradox equation "catching delay"
            posY += (mY-posY) / lazy;
            $rocket.css({left: posX, top: posY});
        }
    }, 10); 

});

Upvotes: 3

closure
closure

Reputation: 7452

Here are minor fixes to make your code work:

var enabled = true;

        $(document).ready(function() {
            $(document).mousemove(function(e) {
                if (enabled) {
                    $("#rocket").stop().animate({left:e.pageX, top:e.pageY});
                }
            });
            $(document).click(function() {
                enabled = !enabled;
            }); 
        });

The fiddle is here http://jsfiddle.net/bmzyK/8/

Just added param e in the mousemove event and added JQuery to the JSFiddle. Also fixed the '==' typo.

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388416

I might try to register and remove the handler like

$(document).ready(function () {
    function handler(e) {
        $("#rocket").css({
            left: e.pageX,
            top: e.pageY
        });
    }

    $(document).on('mousemove.cursor', handler);

    var enabled = true;
    $(document).click(function () {
        enabled = !enabled;
        if (enabled) {
            $(document).on('mousemove.cursor', handler);
        } else {
            $(document).off('mousemove.cursor');
        }

    });
});

Demo: Fiddle

Upvotes: 1

Related Questions