jquery mouseover and mouseout bug

问题

I am trying to get a preview of something when i roll over an element ( to see the overall data with that element included) and when I roll out everything is back as it was. The problem is when I move the mouse cursor quick sometimes the mouseout method is not happening and the data remains updated and I dont want that. Any idea how I can do this ?

$(document).on("mouseover", ".checkRezolvata", function(e){
var idTemp = "";
idTemp = $(this).parent().parent().parent().attr("id");
data = {
id: idTemp,
set: 1    }

$.ajax({
    type: "POST",
    url: "crm/setRezolvataTemp.php",
    data: data,
    async: false,
    success: function(data){
    if(data == 1) {
        getStats();
        getTarget();                            
    } else 
    alert("Eroare la schimbarea starii crmului temp!");
    },error: function(){
    alert("eroare");
    }
});             
});

$(document).on("mouseout", ".checkRezolvata", function(){
var idTemp = "";
idTemp = $(this).parent().parent().parent().attr("id");
data = {
id: idTemp,set: 0}

$.ajax({
type: "POST",
url: "crm/setRezolvataTemp.php",
data: data,
async: false,
success: function(data){
    if(data == 1) {
    getStats();
        getTarget();                            
} else 
alert("Eroare la schimbarea starii crmului temp!");
},error: function(){
alert("eroare");
}
});             
});

回答1:

You can try the mouseenter and mouseleave event handlers in jQuery. mouseover and mouseout is very often a bit tricky, see also:

http://api.jquery.com/mouseenter/

http://api.jquery.com/mouseleave/

The mouseenter event differs from mouseover in the way it handles event bubbling. If mouseover were used in this example, then when the mouse pointer moved over the Inner element, the handler would be triggered. This is usually undesirable behavior. The mouseenter event, on the other hand, only triggers its handler when the mouse enters the element it is bound to, not a descendant. So in this example, the handler is triggered when the mouse enters the Outer element, but not the Inner element.

来源：https://stackoverflow.com/questions/21701260/jquery-mouseover-and-mouseout-bug

标签

jquery

ajax

rollover

rollout