同一元素上发生冲突的单击和悬停事件

Question

我有一个刷新"按钮"(实际上是一个png图像)，用户可以将鼠标悬停在上面，将其从灰色变为蓝色。当单击刷新时，图像会变为播放"按钮"，该按钮表现出类似的颜色变化行为，但当您单击播放图像时，它应该切换回原始刷新图像。

问题是，在点击刷新图像后，当我在没有将鼠标从图像中移除的情况下点击播放图像时，它不会变回刷新图像。

我已经研究了事件传播停止。

这是我的代码：

$('#refresh').click(function (event) {
if (!tMinusZero) {
$('#refresh').html("<img src='play_small_hover.png'>");
tMinusZero = true;
event.stopImmediatePropagation();
} else {
$('#refresh').html("<img src='refresh_small_hover.png'>");
tMinusZero = false;(
event.stopImmediatePropagation();
}
});
$('#refresh').hover(function () {
if (!tMinusZero) {
$('#refresh').html("<img src='refresh_small_hover.png'>");
} else {
$('#refresh').html("<img src='play_small_hover.png'>");
}
}, function () {
if (!tMinusZero) {
$('#refresh').html("<img src='refresh_small.png'>");
} else {
$('#refresh').html("<img src='play_small.png'>");
}
});

我在调试时注意到了一些有趣的事情：

• 如果我在#refresh中移动鼠标过快，悬停将"卡住"，即隐式mouseleave不会启动
• 注释掉悬停代码修复了单击问题
• 将悬停代码留在中，如果我在图像外部但在div内部单击，而不从div中移除鼠标，则可以解决单击问题
• 在尝试再次单击之前将鼠标从div中移除可以修复单击问题
• 点击图像后，如果我将鼠标移到悬停图像和非悬停图像之间，它所更改的图像将闪烁，但如果我首先将鼠标从div中移除，则不会闪烁
• 当我遇到点击问题时，有问题的图像会瞬间闪烁，就像切换到一个非悬停图像，然后迅速切换回有问题的图片

在我看来，我的两个事件处理程序的利益冲突，但停止事件传播似乎没有帮助。

Answer 1

你为什么不尝试用CSS来解决你的问题，我认为它会更优雅，制作一个小div，背景与你的图像相对应，定义一个悬停状态和一个活动状态，再加上一个小脚本，在另外两个状态之间切换

类似于：CSS：

#refresh[data-state=notclicked]
{
background-image:url('play_small.png');
cursor:pointer;
}
#refresh[data-state=notclicked]:hover
{
background-image:url('play_small_hover.png');
cursor:pointer;
}
#refresh[data-state=clicked]
{
background-image:url('refresh_small.png');
cursor:pointer;
}
#refresh[data-state=clicked]:hover
{
background-image:url('refresh_small_hover.png');
cursor:pointer;
}

当然，你必须在CSS中定义宽度和高度，以固定的宽度。宽度与你的png大小相匹配。

比js:

$("#refresh").click(function(){
if ($(this).attr('data-state')=='clicked') {$(this).attr('data-state','notclicked');}
else  {$(this).attr('data-state','clicked');}
});

Answer 2

如果我正确理解您希望它的行为方式，那么您的代码似乎运行得很好，即使单击事件(圆括号)中有拼写错误。

tMinusZero = false;(

此外，为了改进代码，您可以替换

$('#refresh') 

带有

$(this)

在事件内部，因为它将引用您将事件附加到的dom元素。