Question

Hey all, I’ve got an HTML table, and I’m trying to create some Excel style functions like copying and selecting cells and such. I had some cool effects going (using jQuery’s mousedown on table cells), but it was too jumpy. I learned about hoverIntent, but I can’t figure out how to implement it. How would it fit in with this (simplified copy function):

$("table#grid td").mousedown(function () {
    // this cell has the value to copy; retrieve and store it
    mouseDown = true;
}).mouseover(function () {
    if(mouseDown) {
        // copy value into this cell
    }
};

$(document).mouseup(function () {
    mouseDown = false;
    // reset copy info
}

The problem is that it would register a mouseover more than once (some times) when crossing td borders, which was making formatting selected/deselected cells a nightmare.

I hope this makes sense. I’m quite new to jQuery, but trying hard.

Answer 1

This is definitely tricky. HoverIntent will help with sloppy or accidental mousing, but it may not solve your problems. Anything I would write here for how to use it would just be a reproduction of the hoverIntent documentation.

In the event that this is not enough, I suggest you become better acquainted with jQuery’s event object. Once you do, you’ll see that you have to do a good bit of micromanagement, using event.target, event.currentTarget, and/or event.relatedTarget.

In other words, compare your event targets with cell formatting – and possibly a log of selected cells – to determine whether a given mouseover trigger is a “misfire” or not.