互いに干渉しないようにイベントを取得する方法

Question

jQueryイベントを互いに干渉させないようにする方法が不思議です。たとえば、下のコードでは、マウスの上にマウスを置くとボタンのテキストが白くなり、マウスがボタンを離れると黒に戻ります。ボタンをクリックすると青に変わります。これは、ポイント

$(document).ready(function() { 

    $("#food-roulette, #kwik-pix, #crypto, #realtalk").mouseover(function(){ 
     $(this).css('color', 'white'); 
     }); 

    $("#food-roulette, #kwik-pix, #crypto, #realtalk").mouseout(function(){ 
     $(this).css('color', 'black'); 
     }); 

     $(document).on('click','#food-roulette, #kwik-pix, #crypto, #realtalk' ,function(){ 
     $(this).css("color","blue"); 
     });  


}); 

に問題がそのようにすぐに私はボタンをクリックして、私はマウスオーバー/マウスアウト機能を引き継ぐ私のマウスを移動した場合には、青色になるとして来る、動作します。

ボタンをクリックすると、青色のままであることを確認します。そして、新しいボタンをクリックすると、新たにクリックされたボタンは青色のままで、以前にクリックされたボタンはmouseover/mouseoutで白黒になります。

どのように私が州の状況を把握し、そして/またはイベントが重複しないように保つことができますか。

Answer 1

だから私はこの

<script> 
    var els = '#food-roulette, #kwik-pix, #crypto, #realtalk'; 

    $(document).on('mouseenter', els, function() { 
     if (!$(this).hasClass('clicked') { 
      $(this).css('color', '#FFFFFF'); 
     } 
    }); 

    $(document).on('mouseleave', els, function() { 
     if (!$(this).hasClass('clicked') { 
      $(this).css('color', '#000000'); 
     } 
    }); 

    $(document).on('click', els, function() { 
     $('.clicked').removeClass('clicked'); 
     $(this).addClass('clicked'); 
    });  
</script> 

ような何かをするだろうそして、あなたのCSSで.clicked {color: #0000FF !important;}を定義することを忘れないでください。

また、私は色の単語に16進コードを使用することをお勧めします。例えば黒の場合は#000000、青の場合は#FFFFFF、青の場合は#0000FFとなります。

編集：マウスの出入り時にクリックされたクラスのチェックが追加されました。また、他のユーザーが提案したように.hoverを使用することもできます。

Answer 2

var。

var clicked = 0; 
$(document).ready(function() { 
    $("#food-roulette, #kwik-pix, #crypto, #realtalk").mouseenter(function(){ 
     if (!clicked) $(this).css('color', 'white'); 
    }); 
    $("#food-roulette, #kwik-pix, #crypto, #realtalk").mouseleave(function(){ 
     if (!clicked) $(this).css('color', 'black'); 
    }); 
    $(document).on('click','#food-roulette, #kwik-pix, #crypto, #realtalk' ,function(){ 
     clicked=1; 
     $(this).css("color","blue"); 
    });  
}); 

あなたはmouseenter & mouseleaveイベントを使用することが適切です。ですから、マウスが要素に入ったり出たりするときに.css（）が一度トリガーされます。mouseoverではなく、ホバリング時に常にCSSの変更がトリガーされます。

ただ、情報

のためにまたmouseenter & mouseleaveイベントの公式ショートカットを使用することができます。これはhoverと呼ばれています。

あなたは、クリックイベントに `` .addClass（「クリック」）でし

$("#food-roulette, #kwik-pix, #crypto, #realtalk").hover(function(){ 
    //when mouse enter 
    if (!clicked) $(this).css('color', 'white'); 
},function(){ 
    //when mouse leave 
    if (!clicked) $(this).css('color', 'black'); 
});