Прототип клика, мыши и мыши не могут работать вместе?

Question

Я пытаюсь сделать очень простую кнопку, которая меняет цвет на основе мыши, мыши и Нажмите, я делаю это в прототипе, и странно, если я использовал mouseover и mouseout, после того, как я нажал на кнопку кнопка не изменится на белый, кажется, что это из-за отведении указателя мыши, вот мой код

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

Если вы переместите курсор от кнопки после нажатия на нее, последнее событие - выключение мыши, так что это происходит независимо от того, нажимаете вы или нет.

Если вы хотите избежать эффекта mouseout при его нажатии, попробуйте установить флаг при нажатии и прерывании события mouseout, если флаг установлен.

Answer 3

Вы хотите сказать, что вы нажмете мышью, чтобы вызвать изменение permenant в стиле, который не заменен mouseout? Если да, то попробуйте использовать флаг, например, так:

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