如何让事件不会互相干扰

我很好奇如何让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"); 
     });  


});

问题就来了，一旦我按一下按钮，它会变成蓝色，如果我移动鼠标的鼠标悬停/鼠标移开功能接管。

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

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

来源

2017-02-16 user3051442

你可以'.addClass上的click事件（“点击”）'和具有定义为'色'clicked'类：蓝色important'在你的CSS – damndaewoo

确定这是有意义的，使一个CSS一个特定的类，然后设置任何被点击的按钮来给它的CSS属性。那么我将如何去检测以前点击过的按钮（如果有的话），这样我就可以删除新分配的类。 – user3051442

所以我会做这样的事情

<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作为其他用户的建议。

来源

2017-02-16 02:11:36 damndaewoo

其实我只是注意到if语句导致按钮保持白色，即使它们没有被点击另一个按钮后，它没有被覆盖删除if语句修复，但如果我添加一些没有if语句的属性然后当然我收到其他错误。 – user3051442

肮脏的解决方法是在添加类“.clicked”之前将css颜色设置为黑色，基本上是将颜色改变两次。 – user3051442

你需要一个变种。

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

来源

2017-02-16 02:16:03

如何让事件不会互相干扰

回答

相关问题