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

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 事件处理程序添加一个 clicked 类，如下所示：

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

和CSS一样

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

这具有将状态（单击/未单击和鼠标悬停/未悬停）与样式（黑色或灰色）分开的优点。现在它们都混在一起了，造成混乱并让自己面对错误。

Answer 2

您的意思是您希望鼠标单击会导致样式发生永久性变化，而不会被 mouseout 取代？如果是这样，请尝试使用标志，如下所示：

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

如果单击后将光标从按钮上移开，则最后一个事件是 mouseout，因此无论是否单击都会发生。

如果您想在单击时避免 mouseout 效果，请尝试在单击时设置一个标志，如果设置了该标志，则中止 mouseout 事件。

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 进行悬停和选定的类为元素着色可能是最佳选择。但是，如果您只是想快速修复已有的代码，您可以在单击 mouseout 事件后停止观察它。

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