Prototype Klick, Mouseover und mouseout können nicht zusammenarbeiten?

Question

Ich versuche, eine sehr einfache Schaltfläche zu tun, die Farbe ändert, basierend auf Mouseover, mouseout und Klick, ich tue dies in Prototyp und das Seltsame ist, wenn ich verwendet Mouseover- und mouseout, nachdem ich auf die Schaltfläche geklickt wird, nicht die Taste, um Weiß zu ändern, scheint, wie es wegen der mouseout ist, hier ist mein 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' });
});

Wie kann ich es beheben? Danke.

Answer 1

Es sei denn, es ist etwas anderes in der Maus geschieht über und aus, warum nicht mit CSS?

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

Aber ich bin ein wenig verwirrt, was genau wollen Sie passieren. Vorausgesetzt, dass Sie die Taste wissen wollen, wenn es angeklickt wurde oder wenn die Maus über sie ist. Ich würde die Click-Ereignishandler haben eine klickten Klasse hinzufügen, etwa so:

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

Und die CSS als so

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

Dies hat den Vorteil, dass der Staat zu trennen - geklickt / nicht klicken und die Maus über das / nicht über - vom Stil - schwarz oder grau. Gerade jetzt sind sie alle gemischt zusammen, Verwirrung stiften und öffnen sich Fehler.

Answer 2

Sie meinen, dass Sie die Maus wan klicken, um eine dauerhafte Veränderung in der Art zu verursachen, die nicht durch mouseout ersetzt wird? Wenn ja, versuchen, eine Fahne mit, etwa so:

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

Wenn Sie die Cursor weg von der Taste bewegen, nachdem Sie darauf klicken, das letzte Ereignis ist mouseout, so dass es egal ist, wenn Sie klicken oder nicht.

Wenn Sie die mouseout Effekt vermeiden wollen, wenn es angeklickt wird, versuchen, ein Flag gesetzt wird, wenn klicken und abortind das mouseout Ereignis, wenn das Flag gesetzt ist.

Answer 4

einen Status Legen Sie die anderen Ereignisse zu verhindern:

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

Mit CSS für ein Schweben und eine ausgewählte Klasse des Element zu färben ist wahrscheinlich die beste Wahl. Wenn Sie jedoch nur eine schnelle Lösung wollen Sie bereits codieren haben anstelle könnten Sie die mouseout Ereignis aufhören zu beobachten, nachdem es angeklickt wurde.

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