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

我有一个刷新“按钮”（实际上是一个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'>");
    }
});

$（“#刷新”）。单击（函数（事件）{
如果（！tMinusZero）{
$（'#refresh'）.html（“”）；
tMinusZero=真；
事件。stopImmediatePropagation（）；
}否则{
$（'#refresh'）.html（“”）；
tMinusZero=假(
事件。stopImmediatePropagation（）；
}
});
$（'#刷新'）。悬停（函数（）{
如果（！tMinusZero）{
$（'#refresh'）.html（“”）；
}否则{
$（'#refresh'）.html（“”）；
}
}，函数（）{
如果（！tMinusZero）{
$（'#refresh'）.html（“”）；
}否则{
$（'#refresh'）.html（“”）；
}
});

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

• 如果我将鼠标移动过#刷新过快，悬停将“粘住”，即隐式鼠标不会发射
• 注释掉悬停代码修复了单击问题
• 如果我在图像外部但在div内部单击鼠标，而不从div中移除鼠标，则将悬停代码保留在中，可以修复单击问题
• 在尝试再次单击之前从div中删除鼠标修复了单击问题
• 单击图像后，如果我将鼠标移到图像上，它更改为的图像将在悬停图像和非悬停图像之间闪烁，但如果我首先从div中移除鼠标，则不会闪烁
• 当我遇到点击问题时，有问题的图像会瞬间闪烁，好像切换到一个非悬停图像，然后快速切换回有问题的图像

---

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

如果我正确理解了您希望它的行为方式，您的代码似乎工作得很好，即使单击事件（圆括号）中有输入错误

另外，只是为了改进可以替换的代码

$('#refresh') 

与

---

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

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

比如： CSS:

当然，您必须在CSS中定义宽度和高度，将其设置为与png大小匹配的固定width.height

而不是js：

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

---

你能在这里演示一下吗？www.jsfiddle.net这个问题没有发生在我身上（）@RajaprabhuAravindasamy啊，是的。下次我肯定会的。我希望这是一个简单的语义修复，没有麻烦为其他人制造一把小提琴。好主意。@chumkiu我想我使用png图像可能有点奇怪。就像上面提到的一样，在div中单击，但不是在我的代码运行得很好。不过谢谢你的理智检查！天哪，你就像互联网上的特蕾莎修女。它现在运行了！

$(this)

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

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