Press mouse button on click
I have 2 events on one table cell. 1, a simple tr line header on .hover (on, off) and 2, onclick, it expands the div below it.
Both elements work as desired. What I am trying to do is STOP the second part of the .hover function (on mouse-out) on firing when the tr button is pressed so that it stays selected when the div is opened. I've tried using the class in a function, but 99% of the time it gets tedious to shoot while my mouse is still on it, so when my mouse leaves, it returns it to its normal lo-lite state.
So how do I, with a .click () call, stop a separate .hover function from calling the 2nd function part?
these functions seem a little silly as they are, but there are many more in my real code. so these are stripped down parts of the action.
.hover (function () {
$ (This) .removeClass ('xhead'); $ (This) .addClass ('headerhover');}, function () {$ (This) .removeClass ('headerhover') $ ( This is) .addClass ('xhead');});
and this:
function togglediv(id){
$("#"+id).toggle("fast");
}
called from:
function loadmenu(id){
var divid = 'div_'+id+'_detail';
togglediv(divid);
}
which is the second call:
$('.viewer').click(function(e) {
var id = e.target.id;
loadmenu(id);
}
});
the violin is locked at work ... sorry i can't make this any easier.
appreciate the ideas.
The long and short is that on .vm click, stick headerhover, kill the mouseout event to return it to the xhead class. Otherwise, if there is no click, do a class override to highlight the row.
source to share
Easy way? In click
put something like:
$(this).data("sticky", true);
And in your hover (mouse part) check it out:
if (! $(this).data("sticky"))
{
// proceed with hover mouseout code
}
Make sure your selectors are lined up for events. In the code above, this is not the case, so you need a more complex selector, for example $(this).closest('.xhead').data("sticky", true);
, or you can define an additional event click
for yourself .xhead
just to handle this interaction (these click events will bubble, firing on both).
Also note that you choose for td.xhead
in your written code for hover
, but your HTML only has tr.xhead
.
source to share