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

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

Использование CSS для наведения и выбранного класса для окрашивания элемента, вероятно, лучший выбор. Однако, если вы просто хотите, чтобы быстрое исправление кода уже было на месте, вы можете прекратить наблюдать событие mouseout после его нажатия.

$("izzy").observe('click', function(e) {
     e.element().setStyle({ color: '#FFFFFF' });
     e.element().stopObserving('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

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

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