この.mouseenter関数を「停止」またはトグルするにはどうすればよいですか？

Question

私のコードは単純です：

するvarドロー=偽;

マウスをクリックすると、「描画」が偽から真に切り替わります。

「描く」がtrueの場合、マウスがdiv要素に入ったとき、それはその色（）イベント、特定の（ラベル「ピクセル」）の背景のMouseEnterを可能にします。これは正常に動作しますが、マウスをもう一度クリックして「描画」がfalseに設定されていると、mouseenterイベントはオフになりません。私はその色、背景白、再び「他の」ステートメントを設定することができますが、それはこれがすべて1つの関数に処理され

...もっとバンドエイドで、考えではありません。

var draw = false; 
var drawStart = function(){ 
    draw=!draw; 
    if (draw === true) 
    { 
     $('.pixel').mouseenter(function() { 
       $(this).css('background-color', 'black'); 
     }); 
    } 
    else 
    { 

      //don't do anything 
    } 

}); 

それが描かれた後、私はまた別のものにピクセルクラスをスワップアウトしようとしたが、私はまだMouseEnterイベントは、まだ引き分けが真か偽か、クラスの変更をトリガーし、同様の問題に遭遇します。

タイプミスは、彼らがそうでは存在しない、上記のコードである場合、私は、携帯電話上でこれを書いた...

を/他の場合、私はまた、代わりにwhileループを試してみましたが、これは、ブラウザがクラッシュ私の実際のコード。

Answer 1

あなたは試す、（オフ）イベントのバインドを解除する必要があります。

var draw = false; 
var drawStart = function(){ 
    draw=!draw; 
    if (draw === true) 
    { 
     $('.pixel').mouseenter(function() { 
       $(this).css('background-color', 'black'); 
     }); 
    } 
    else 
    { 
      // deprecated 
      // $('.pixel').unbind('mouseenter'); 
      $('.pixel').off('mouseenter'); 
    } 

}); 

コメントで述べたように、あなたの代わりにオフに使用する必要があります。

Answer 2

mouseenterは.pixelにバインドさと、その関数が呼び出された後に持続されます。あなたは私の読み、あなたのコードを容易にするために.off

$('.pixel').off('mouseenter'); 

でそれを削除します。

var draw = false; 
var drawStart = function(){ 
    draw=!draw; 
    if (draw === true) 
    { 
     $('.pixel').on('mouseenter', function() { 
       $(this).css('background-color', 'black'); 
     }); 
    } 
    else 
    { 
     $('.pixel').off('mouseenter'); 
    } 

}); 

参考：How do I properly use the jQuery off() method to remove the mouseenter and mouseleave events off an element

Answer 3

私は違った。このことを考え示唆しています。まず、スタイルをカプセル化するCSSクラスを作成します。

.draw { background-color: black; } 

イベントハンドラを追加および削除する代わりに、常にイベントハンドラをバインドし、必要がない場合は何もしないでください。

var draw = false; 
var drawStart = function(){ 
    draw = !draw; 
}; 
$('.pixel').on('mouseenter', function() { 
    if (draw) { 
     $(this).addClass('draw'); 
    } 
}); 

これは、何が起こっているのかを簡単に確認し、JavaScriptのスタイルをCSSの属する場所に移動します。

このコードは、drawクラスを追加するだけで、削除しないことに注意してください。マウスのEnterキーを押してオン/オフする場合は、addClassの代わりにtoggleClassを使用してください。

Answer 4

else 
    { 
     $('.pixel').off('mouseenter'); 
    } 

これはトリックです。ありがとうございました！私は、将来の参照のために他の解決策を念頭に置いていきます。