Prototype click, mouseover and mouseout can't work together?

Question

Hi, I'm trying to do a very simple button that changes color based on mouseover, mouseout and click, I'm doing this in prototype and the weird thing is if I used mouseover and mouseout, after I clicked on the button, the button wouldn't change to white, seems like it is because of the mouseout, here's my 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' });
});

how can I fix it? Thanks.

Answer 1

If you move the cursor away from the button after clicking on it, the last event is mouseout, so it happens no matter if you click or not.

If you want to avoid the mouseout effect when it is clicked, try setting a flag when clicking and abortind the mouseout event if the flag is set.

Answer 2

Do you mean that you wan the mouse click to cause a permenant change in the style that is not replaced by mouseout? If so, try using a flag, like 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

Set a status to prevent the other events:

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 4

Unless there's something else happening in mouse over and out, why not use css?

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

However, I'm a little confused as to what exactly you want to happen. Assuming you want the button white if it has been clicked or if the mouse is over it. I'd have the click event handler add a clicked class, like so:

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

And the css as so

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

This has the advantage of separating the state - clicked/not-click and mouse over/not over - from the style - black or gray. Right now they're all mixed in together, creating confusion and opening yourself to bugs.

Answer 5

Using CSS for a hover and a selected class to colour the element is probably the best choice. However, if you just want a quick fix to code you already have in place you could stop observing the mouseout event after it has been clicked.

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