Clic prototipo, passaggio del mouse e passaggio del mouse non possono funzionare insieme?

Question

Sto cercando di fare un pulsante molto semplice che cambia colore in base al passaggio del mouse, mouseout e clic, lo sto facendo in prototipo e la cosa strana è che se avessi usato il mouseover e il mouseout, dopo aver fatto clic sul pulsante, il pulsante non cambierà in bianco, sembra che sia a causa del passaggio del mouse, ecco il mio codice

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

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

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

come posso ripararlo? Grazie.

Answer 1

A meno che non ci sia qualcos'altro che accade dentro e fuori dal mouse, perché non usare CSS?

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

Tuttavia, sono un po 'confuso su cosa esattamente vuoi che accada. Supponendo che tu voglia il pulsante bianco se è stato cliccato o se il mouse è sopra di esso. Vorrei che il gestore di eventi click aggiungesse una classe cliccata, in questo modo:

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

E anche i CSS

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

Questo ha il vantaggio di separare lo stato - cliccato / non-clic e mouse over / not over - dallo stile - nero o grigio. In questo momento sono tutti mescolati insieme, creando confusione e aprendo te stesso ai bug.

Answer 2

Vuoi dire che il clic del mouse è in declino per causare un cambiamento permanente nello stile che non viene sostituito dal mouseout? In tal caso, prova a utilizzare una bandiera, in questo modo:

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

Se si sposta il cursore lontano dal pulsante dopo aver fatto clic su di esso, l'ultimo evento è il passaggio del mouse, quindi accade indipendentemente dal fatto che si faccia clic o meno.

Se si desidera evitare l'effetto mouseout quando viene cliccato, provare a impostare un flag quando si fa clic e annullare l'evento mouseout se il flag è impostato.

Answer 4

Imposta uno stato per prevenire gli altri eventi:

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

L'uso del CSS per un hover e una classe selezionata per colorare l'elemento è probabilmente la scelta migliore. Tuttavia, se desideri solo una soluzione rapida al codice che hai già in atto, potresti smettere di osservare l'evento mouseout dopo che è stato fatto clic.

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