在javascript中啓用和禁用事件

所以基本上我有一個事件發生在頁面加載。它會導致圖像跟隨您的光標，但在點擊事件時，我想禁用此事件，然後再次單擊重新啓用鼠標跟隨事件在javascript中啓用和禁用事件

我試着只是創建一個切換變量，但它似乎凍結我的形象。 .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

來源

2013-11-10 nope

'enabled ==！enabled;'看起來像一個錯字。嘗試'=':) – rninty

我剛剛看到，我總是想到當我使用布爾邏輯我使用== – nope

LIVE DEMO

而不是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); 

});

來源

2013-11-10 06:48:21

工作正常，但^ = 1是什麼意思？ – nope

@CoreyBuchillon它是一個'按位異或運算符'，像'^ ='一樣用'enabled ==！enabled'，其中1表示布爾型'true'被轉換爲'0'（false）反之亦然。 –

@CoreyBuchillon又增加了一個你可能會喜歡的例子。 –

我可能會嘗試像

$(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

來源

2013-11-10 06:54:47

優秀的+1爲開和關示範 – nope

這裏有小修正，以使你的代碼工作：

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 e和加入jQuery來了的jsfiddle。還修復了'=='錯字。

來源

2013-11-10 06:54:47 closure

哦，不錯，如何添加參數修復一切？ – nope

您在鼠標移動中沒有收到事件「e」，但在動畫調用中將其引用。 – closure

在javascript中啓用和禁用事件

回答

相關問題