¿El clic de prototipo, el mouseover y el mouseout no pueden funcionar juntos?

Question

Estoy tratando de hacer un botón muy simple que cambie el color en función del mouseover, mouseout y haga clic, estoy haciendo esto en prototipo y lo extraño es que si uso mouseover y mouseout, después de hacer clic en el botón, el botón no cambiará a blanco, parece que se debe al mouseout, aquí está mi código

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

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

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

¿cómo puedo solucionarlo? Gracias.

Answer 1

A menos que ocurra algo más al pasar el mouse por encima y por fuera, ¿por qué no usar css?

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

Sin embargo, estoy un poco confundido en cuanto a qué es exactamente lo que quieres que suceda. Suponiendo que desea que el botón sea blanco si se ha hecho clic o si el mouse está sobre él. Me gustaría que el controlador de eventos click agregue una clase cliqueada, así:

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

Y el CSS como tal

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

Esto tiene la ventaja de separar el estado - clic / no hacer clic y pasar el mouse / no pasar - del estilo - negro o gris. En este momento, todos están mezclados, creando confusión y abriéndose a los errores.

Answer 2

¿Quiere decir que desea que el clic del mouse provoque un cambio permanente en el estilo que no se reemplaza por mouseout? Si es así, intente usar una bandera, así:

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

Si aleja el cursor del botón después de hacer clic en él, el último evento es mouseout, por lo que sucede sin importar si hace clic o no.

Si desea evitar el efecto mouseout cuando se hace clic, intente configurar una bandera al hacer clic y anule el evento mouseout si la bandera está activada.

Answer 4

Establezca un estado para evitar los otros eventos:

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

Usar CSS para un elemento emergente y una clase seleccionada para colorear el elemento es probablemente la mejor opción. Sin embargo, si solo desea una solución rápida al código que ya tiene en su lugar, puede dejar de observar el evento mouseout después de hacer clic en él.

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