CODEWITHSUNDEEP
jquery
BReal14
BReal14

Reputation: 1584

stop hover's mouseout when clicked

I have 2 events on one table cell taking place. 1, a simple tr row highlighter on .hover(on, off) and 2, onclick, it slides open a div below it.

Both items work as desired. What I am trying to do is STOP the 2nd part of the .hover function (on mouseout) from firing when the tr is clicked so that it stays highlighted when the div is opened. I tried using the class on the function, but 99% of the time, it tires to hilight it while my mouse is still on it, thus when my mouse moves off it, it renders it back to normal lo-lite state.

So, how do i, with the .click() call, stop a seperate .hover call's 2nd function part from running?

these functions seem a bit stupid as is, but in my real code, there's a LOT more going on. so, these are the stripped out parts of the actions.

.hover( function(){
$(this).removeClass('xhead'); $(this).addClass('headerhover'); } , function(){ $(this).removeClass('headerhover') $(this).addClass('xhead'); } );

and this:

function togglediv(id){
    $("#"+id).toggle("fast");
}

gets called from:

function loadmenu(id){
    var divid = 'div_'+id+'_detail';
    togglediv(divid);
}

which is a 2nd call of:

$('.viewer').click(function(e) {        
    var id = e.target.id;                   
    loadmenu(id);           
    }
});

fiddle is blocked at work... sorry i can't make it easier.

appreciate the ideas.

The long and short of it is that on .vm click, stick headerhover, kill mouseout event from returning it to xhead class. Otherwise, if no click, perform the class swap to do the row highlight.

Upvotes: 3

Views: 1276

Answers (1)

Plynx
Plynx

Reputation: 11461

Simple way? In your click put something like:

$(this).data("sticky", true);

And in your hover (mouseout portion) check for it:

if (! $(this).data("sticky"))
{
    // proceed with hover mouseout code
}

Be sure that your selectors line up across events. In the code above, it doesn't, so you need a more complex selector like $(this).closest('.xhead').data("sticky", true); or you can define an additional click event on the .xhead itself just to handle this interaction (this click events will bubble through, firing on both).

Also note that you are selecting for td.xhead in your written code for hover, but your HTML only has a tr.xhead.

Upvotes: 0

Related Questions