Prototype cliquez sur, mouseover et mouseout ne peuvent pas travailler ensemble?

Je suis en train de faire une très simple bouton qui change de couleur en fonction mouseover, mouseout et
cliquez sur, je suis en train de faire ce à l'état de prototype et la chose étrange est, si j'ai utilisé mouseover et mouseout,
après j'ai cliqué sur le bouton, le bouton ne serait pas changer en blanc, on dirait que c'est à cause de la mouseout, 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.

OriginalL'auteur shibbydoo | 2008-11-05

  1. 6

    Sauf si il y a autre chose qui se passe dans la souris au-dessus et à l'extérieur, pourquoi ne pas utiliser les css? 

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

    Cependant, je suis un peu confus sur ce qu'est exactement que vous voulez arriver. En supposant que vous souhaitez que le bouton blanc si elle a été cliqué ou si la souris est au-dessus de lui. J'aurais le gestionnaire d'événements click ajouter un cliqué classe, comme suit:

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

    Et le css comme

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

    Cela a l'avantage de séparer l'état - cliqué/pas de la souris et de la souris au-dessus de/ne pas sur - le style - le noir ou gris. Juste maintenant, ils sont tous mélangés ensemble, de créer de la confusion et de vous ouvrir à de bugs.

    hmmm, ce n'est "sélectionné"? Parce que ça ne fonctionne pas... merci.

    OriginalL'auteur sblundy

  2. 2

    Voulez-vous dire que vous wan le clic de la souris pour provoquer une permanente changement dans le style qui n'est pas remplacé par mouseout? Si oui, 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;
});

    OriginalL'auteur EndangeredMassa

  3. 0

    Si vous déplacez le curseur à côté de la touche après avoir cliqué sur elle, le dernier événement mouseout, de sorte qu'il arrive, peu importe si vous cliquez sur ou pas.

    Si vous voulez éviter le mouseout effet, lorsqu'il est cliqué, essayez de définir un indicateur en cliquant et abortind l'événement mouseout si le drapeau est réglé.

    OriginalL'auteur schonarth

  4. 0

    Définir 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' });
});

    OriginalL'auteur Diodeus - James MacFarlane

  5. 0

    À l'aide de CSS pour le vol stationnaire et une classe sélectionnée pour la couleur de l'élément est probablement le meilleur choix. Toutefois, si vous voulez juste une solution rapide pour le code que vous avez déjà en place, vous pourriez arrêter d'observer le mouseout événement après qu'il a été cliqué.

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

    OriginalL'auteur thoughtcrimes