Le clic prototype, la souris sur la souris et la souris ne peuvent pas fonctionner ensemble?

Question

J'essaie de créer un bouton très simple qui change de couleur en fonction du passage de la souris, de la souris et cliquez sur, je fais cela en prototype et la chose étrange est si j'ai utilisé mouseover et mouseout, après avoir cliqué sur le bouton, le bouton ne changerait pas en blanc, on dirait que c'est à cause de la souris, voici mon code

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

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

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

comment puis-je résoudre ce problème? Merci.

Answer 1

À moins qu’il ne se passe autre chose, pourquoi ne pas utiliser CSS?

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

Cependant, je suis un peu confus quant à ce que vous voulez exactement. En supposant que vous souhaitiez que le bouton soit blanc s'il a été cliqué ou si la souris le survole. J'aurais le gestionnaire d'événements click ajouter une classe clicked, comme suit:

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

Et le CSS comme tel

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

Cela présente l’avantage de séparer l’état - clic / non clic et la souris sur / pas sur - du style - noir ou gris. Pour le moment, ils sont tous mélangés, ce qui crée de la confusion et vous ouvre aux bugs.

Answer 2

Voulez-vous dire que vous cliquez avec la souris pour provoquer un changement permanent du style qui n'est pas remplacé par mouseout? Si c'est le cas, essayez d'utiliser un drapeau, comme suit:

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 vous déplacez le curseur en dehors du bouton après avoir cliqué dessus, le dernier événement est mouseout, de sorte qu'il se produit que vous cliquiez ou non.

Si vous souhaitez éviter l'effet de la souris lorsque vous cliquez dessus, essayez de définir un indicateur lorsque vous cliquez dessus, puis annulez l'événement mouseout si l'indicateur est défini.

Answer 4

Définissez un statut pour empêcher les autres événements:

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

Utiliser le CSS pour un survol et une classe sélectionnée pour colorer l'élément est probablement le meilleur choix. Cependant, si vous voulez juste une solution rapide au code que vous avez déjà en place, vous pouvez cesser d’observer l’événement mouseout une fois qu’il a été cliqué.

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