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

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'; }

然而，我对你究竟想要发生什么感到困惑。假设您希望按钮为白色，如果已单击或鼠标悬停在按钮上。我有点击事件处理程序添加一个单击的类，如下所示：

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

和css一样

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

这样做的好处是可以将状态 - 单击/不单击和鼠标悬停在/不结束 - 与样式 - 黑色或灰色分开。现在，他们全都混在一起，造成了混乱，并让自己打开了虫子。

Answer 2

你的意思是你想点击鼠标来导致鼠标输出没有取代的风格的永久性变化？如果是这样，请尝试使用标志，如下所示：

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事件。

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');
});