Prototype clique, mouseover e mouseout não podem trabalhar juntos?

Question

Eu estou tentando fazer um botão muito simples que muda de cor com base em mouseover, mouseout e clique, eu estou fazendo isso no protótipo e o estranho é se eu usasse mouseover e mouseout, depois que eu clicar no botão, o botão não iria mudar para branco, parece que é por causa da mouseout, aqui está o meu 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' });
});

Como posso corrigir isso? Obrigado.

Answer 1

A menos que há algo mais acontecendo no mouse sobre e fora, por que não usar css?

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

No entanto, estou um pouco confuso sobre o que exatamente você quer que aconteça. Supondo que você deseja que o botão branco se ele foi clicado ou se o mouse está sobre ele. Eu teria o manipulador de eventos, clique em Adicionar uma classe clicado, assim:

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

E o css como assim

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

Isto tem a vantagem de separar o Estado - clicado / não-click e mouse over / não acabou - a partir do estilo - preto ou cinza. Agora eles estão todos misturados em conjunto, criando confusão e abrindo-se a erros.

Answer 2

Você quer dizer que você wan o clique do mouse para causar uma mudança permanente no estilo que não é substituído por mouseout? Se assim for, tente usar uma bandeira, assim:

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 você mover o cursor para longe do botão depois de clicar nele, o último evento é mouseout, assim acontece, não importa se você clicar ou não.

Se você quiser evitar o efeito mouseout quando é clicado, tente definir um sinalizador quando clicando e abortind o evento mouseout se o sinalizador está definido.

Answer 4

Definir um status para impedir que os outros 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

Usando CSS para um foco e uma classe selecionada para colorir o elemento é provavelmente a melhor escolha. No entanto, se você só quer uma solução rápida para o código que você já tem no lugar que você poderia parar de observar o evento mouseout depois de ter sido clicado.

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