Thursday, 12 September 2013

jQuery hover firing multiple times, even for TD elements where the mouse hasn't hovered for the required duration

jQuery hover firing multiple times, even for TD elements where the mouse
hasn't hovered for the required duration

I have the timeout set fairly long, 888ms. And I'm being careful not to
let my mouse pointer linger on more than one cell. The mouse does touch
some other cells extremely briefly after I have hovered over a cell in the
middle of the table and then quickly move the mouse across the adjacent
cells to get outside the bounds of the table. But the mouse is on those
adjacent cells for only an instant.
Yet I'm getting an alert for every cell the mouse touches on its way out
of the table. It's as if once the timeout has fired, any cell whose
mouseover event is firing is being treated as though it had been hovered
on for the full 888ms.
The following code is inside an each() loop, which visits each of the
cells in the table:
cell$.hover(
function () {
var el = $(this);
var delayedFunction = window.setTimeout(function () {
$.data(el, 'timerid', null);
alert("hovered" + el.attr('id'));
}, 888);
$.data(el, 'timerid', delayedFunction);
},
function () {
var el = $(this);
var delayedFunction = $.data(el, 'timerid');
if (delayedFunction != null) {
// Kill previously started timer
window.clearTimeout(delayedFunction);
}
}
);

No comments:

Post a Comment