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

Question

Estoy tratando de hacer un botón muy simple que cambia de color basado en mouseover, mouseout y clic, estoy haciendo esto en prototipo y lo extraño es si usé mouseover y mouseout, después de hacer clic en el botón , el botón no cambiará a blanco, parece que es debido a la 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 haya algo más sucediendo en ratón sobre y fuera, ¿por qué no usar CSS?

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

Sin embargo, estoy un poco confundido sobre qué es exactamente lo que quiere que suceda. Suponiendo que desea el botón blanco si se ha hecho clic o si el mouse está sobre él. Tendría el controlador de eventos haga clic en Agregar una clase se ha hecho clic, así:

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

Y el css como tan

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

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

Answer 2

Si aleja el cursor del botón después de hacer clic en él, el último evento se borrará, por lo tanto, no importa si hace clic o no.

Si desea evitar el efecto de mouseout cuando se hace clic en él, intente establecer un indicador al hacer clic y abortar el evento mouseout si se establece el indicador.

Answer 3

¿Quiere decir que quiere hacer clic con el mouse para provocar un cambio permanente en el estilo que no se reemplaza por mouseout? Si es así, trate de 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 4

Definir un estado para evitar que 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

El uso de CSS para un vuelo estacionario y una clase seleccionada para colorear el elemento es probablemente la mejor opción. Sin embargo, si solo quiere una solución rápida al código que ya tiene instalado, podría dejar de observar el evento de mouseout después de haber hecho clic en él.

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