プロトタイプのクリック、マウスオーバー、およびマウスアウトは一緒に機能しませんか？

Question

私は、マウスオーバー、マウスアウト、 クリックして、プロトタイプでこれをやっていますが、奇妙なのは、マウスオーバーとマウスアウトを使用した場合 ボタンをクリックしても、ボタンは白に変わりません。マウスアウトが原因のようです。ここにコードがあります

$("izzy").observe('mouseover', function() {
     $('izzy').setStyle({ color: '#FFFFFF' });
});

$("izzy").observe('mouseout', function() {
     $('izzy').setStyle({ color: '#666666' });
});

$("izzy").observe('click', function() {
     $('izzy').setStyle({ color: '#FFFFFF' });
});

どうすれば修正できますか？ありがとう。

Answer 1

マウスを何度も繰り返し使用して、何か別のことが起こっていない限り、cssを使用してみませんか？

#izzy:hover { color: '#FFFFFF'; }

しかし、私はあなたが何をしたいのかについて少し混乱しています。ボタンがクリックされた場合、またはマウスがボタンの上にある場合、ボタンを白にしたいと仮定します。次のように、クリックイベントハンドラーにclickedクラスを追加します。

$("izzy").observe('click', function() {
    $('izzy').addClass('selected');
});

CSSもそうです

#izzy { color: '#666666'; }
#izzy:hover, #izzy.selected { color: '#FFFFFF'; }

これには、状態（クリック/非クリックとマウスオーバー/ノーオーバー）をスタイル（黒またはグレー）から分離するという利点があります。現在、それらはすべて混ざり合っており、混乱を引き起こし、バグにさらされています。

Answer 2

マウスのクリックを無効にして、マウスアウトで置き換えられないスタイルの永続的な変更を行うことを意味しますか？その場合は、次のようにフラグを使用してみてください。

var wasClicked = false;

$("izzy").observe('mouseover', function() {
    if (!wasClicked) $('izzy').setStyle({ color: '#FFFFFF' });
});

$("izzy").observe('mouseout', function() {
    if (!wasClicked) $('izzy').setStyle({ color: '#666666' });
});

$("izzy").observe('click', function() {
    $('izzy').setStyle({ color: '#FFFFFF' });
    wasClicked = true;
});

Answer 3

ボタンをクリックした後にカーソルをボタンから離すと、最後のイベントはマウスアウトであるため、クリックするかどうかに関係なく発生します。

クリックされたときにマウスアウト効果を避けたい場合は、クリック時にフラグを設定し、フラグが設定されている場合はマウスアウトイベントを中止します。

Answer 4

他のイベントを防ぐためにステータスを設定します：

var clicked = false
$("izzy").observe('mouseover', function() {
     if(!clicked) {
        $('izzy').setStyle({ color: '#FFFFFF' });
     }
});

$("izzy").observe('mouseout', function() {
     if(!clicked) {
        $('izzy').setStyle({ color: '#666666' });
     }
});

$("izzy").observe('click', function() {
    clicked = true
    $('izzy').setStyle({ color: '#cccccc' });
});

Answer 5

CSSをホバーおよび選択したクラスに使用して要素に色を付けることが、おそらく最良の選択です。ただし、既に配置されているコードを簡単に修正する場合は、クリックされた後にmouseoutイベントの監視を停止できます。

$("izzy").observe('click', function(e) {
     e.element().setStyle({ color: '#FFFFFF' });
     e.element().stopObserving('mouseout');
});