原型点击，鼠标悬停和鼠标不能一起工作？

Question

我试图做一个非常简单的按钮，基于鼠标悬停，鼠标移动和 点击，我在做原型和奇怪的事情是如果我用鼠标悬停和鼠标， 我点击按钮后，按钮不会变成白色，看起来像是因为鼠标悬停，这是我的代码

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

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

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

我该如何解决它？谢谢。

Answer 1

除非有别的东西在鼠标和出发生的事情，为什么不使用CSS？

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

但是，我对你到底想要发生什么感到困惑。假设你想让按钮变成白色，如果它已被点击或者鼠标移过它。我有click事件处理程序中添加一个点击的类，如下所示：

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

而CSS为使

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

这有分离状态的优势 - 点击/非点击鼠标在/不在 - 从风格 - 黑色或灰色。现在他们都混在一起了，造成了混乱，让自己面对错误。

Answer 2

如果在点击按钮后将光标移离按钮，最后一个事件就是鼠标移动，所以无论点击与否，都会发生。

如果您希望在点击时避免鼠标移出效果，请尝试设置标志，以便在设置标志时单击并放弃鼠标移出事件。

Answer 3

你的意思是说，你想要点击鼠标来引起一个没有被鼠标替换的样式的变化吗？如果是这样，请尝试使用一个标志，像这样：

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 4

设置状态，以防止其他事件：

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

使用CSS悬停和选定的类对元素着色可能是最佳选择。但是，如果您只想快速修复代码，则您已经拥有适当的位置，您可以在点击鼠标后停止观察鼠标事件。

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