Question

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

我尝试创建一个切换变量，但它似乎冻结了我的形象。 .on（）和.off（）在这里是否合适？我阅读了文档，但我对如何实现它们很困惑

我很困惑，我想如何关闭一个事件。

的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

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

而不是 animate() 使用 .css()

如果你真的想为捕捉太空船添加一个时尚的动画：

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

});

Answer 2

我可能会尝试注册并删除像

这样的处理程序

$(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');
        }

    });
});

演示：Fiddle

Answer 3

以下是使代码有效的小修补程序：

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

小提琴在这里http://jsfiddle.net/bmzyK/8/

刚刚在mousemove事件中添加了param，并将JQuery添加到了JSFiddle。还修复了＆＃39; ==＆＃39;错字。

在javascript中启用和禁用事件

3 个答案: