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

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

Однако меня немного смущает, что именно вы хотите, чтобы произошло. Предполагая, что вы хотите, чтобы кнопка была белой, если на нее нажали или на нее навели мышь. Я бы попросил обработчик события click добавить класс 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');
});