原型點擊，鼠標懸停和鼠標移動不能一起工作？

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

但是，我對你究竟想要發生什么感到困惑。 假設您希望按鈕為白色，如果已單擊或鼠標懸停在按鈕上。 我有點擊事件處理程序添加一個單擊的類，如下所示：

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

如果在單擊后將光標移離按鈕，則最后一個事件是mouseout，因此無論您是否單擊都會發生。

如果要在單擊時避免鼠標移除效果，請嘗試在單擊時設置標志，並在設置標志時中止mouseout事件。

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