如何让事件不相互干扰

Question

我很好奇如何让jQuery事件不相互干扰。例如，在下面的代码中，我希望按钮文本在鼠标悬停时变为白色，并在鼠标离开按钮时变回黑色。当我单击按钮时，我希望它变成蓝色。它在一定程度上有效

$(document).ready(function() {
$("#food-roulette, #kwik-pix, #crypto, #realtalk").mouseover(function(){
$(this).css('color', 'white');
});
$("#food-roulette, #kwik-pix, #crypto, #realtalk").mouseout(function(){
$(this).css('color', 'black');
});
$(document).on('click','#food-roulette, #kwik-pix, #crypto, #realtalk' ,function(){
$(this).css("color","blue");
});    

});  

问题是，一旦我单击按钮并且它变成蓝色，如果我移动鼠标，鼠标悬停/鼠标退出功能就会接管。

我想确保当我单击按钮时，它保持蓝色。一旦我单击一个新按钮，那么新单击的按钮将保持蓝色，而以前单击的按钮现在可以通过鼠标悬停/鼠标退出变为白色/黑色。

任何人都可以帮助我如何跟踪状态和/或防止事件重叠。

Answer 1

所以我会做这样的事情

<script>
var els = '#food-roulette, #kwik-pix, #crypto, #realtalk';
$(document).on('mouseenter', els, function() {
if (!$(this).hasClass('clicked') {
$(this).css('color', '#FFFFFF');
}
});
$(document).on('mouseleave', els, function() {
if (!$(this).hasClass('clicked') {
$(this).css('color', '#000000');
}
});
$(document).on('click', els, function() {
$('.clicked').removeClass('clicked');
$(this).addClass('clicked');
});    
</script>

不要忘记在CSS中定义.clicked {color: #0000FF !important;}。

另外，我更喜欢十六进制代码而不是颜色的单词。 例如#000000黑色，#FFFFFF白色和蓝色#0000FF。

编辑：添加了对鼠标进入/离开时单击的类的检查。此外，您可以按照其他用户的建议使用 .hover。

Answer 2

你需要一个变量。

var clicked = 0;
$(document).ready(function() {
$("#food-roulette, #kwik-pix, #crypto, #realtalk").mouseenter(function(){
if (!clicked) $(this).css('color', 'white');
});
$("#food-roulette, #kwik-pix, #crypto, #realtalk").mouseleave(function(){
if (!clicked) $(this).css('color', 'black');
});
$(document).on('click','#food-roulette, #kwik-pix, #crypto, #realtalk' ,function(){
clicked=1;
$(this).css("color","blue");
});    
});  

使用mouseenter和mouseleave事件是正确的。因此，.css() 会在鼠标进入或离开元素时触发一次，而不是像mouseover那样在悬停时一直触发 css 更改。

仅供参考

您还可以使用官方快捷方式进行mouseenter和mouseleave活动。它叫hover.

$("#food-roulette, #kwik-pix, #crypto, #realtalk").hover(function(){
//when mouse enter
if (!clicked) $(this).css('color', 'white');
},function(){
//when mouse leave
if (!clicked) $(this).css('color', 'black');
});