javascript - 在 javascript 中启用和禁用事件

Question

所以基本上我有一个在页面加载时发生的事件。它会导致图像跟随您的光标，但在单击事件时我想禁用此事件，然后在第二次单击时重新启用鼠标跟随事件

我尝试只创建一个切换变量，但它似乎只是卡住了我的图像。 .on() 和 .off() 在这里合适吗？我阅读了文档，但对如何实现它们感到困惑

我对如何关闭我猜的事件感到困惑。

脚本

    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

Answer 1

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

使用 .css()

代替 animate()

如果您真的想为您的捕捉航天器添加一个流畅的动画:

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

});