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。

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＆amp; mouseleave事件。因此.css（）将在鼠标进入或离开元素时触发一次，而不是像mouseover那样在悬停时始终触发css更改。

仅供参考

您还可以使用mouseenter＆amp;的官方快捷方式。 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');
});

如何使事件不互相干扰

2 个答案: