Detect If Mouse Is Over A Column Border

Does anybody know how can I detect if mouse is over a column border or a cell border, either by jQuery or JavaScript? I want to implement a column resizing on a specific table. Any

Solution 1:

You should check if the offsetX and offsetY are less than the border-width and if so you're in the border, also check if offsetX is greater than innerWidth or offsetY is greater than innerHeight

$('td').hover(function(e){
    var border_width = parseInt($(this).css('border-width'));
    if(e.offsetX < border_width || e.offsetX > $(this).innerWidth() || e.offsetY < border_width || e.offsetY > $(this).innerHeight()){
        console.log('This is the border');  
    }
});

Here's a jsFiddle

Solution 2:

May be you can do like as follows:

1. Listen for mouse hover event on the element
2. Check the mouse position.
3. If the offset() + outerWidth() of the element is same as the mouse position, it means, you are on the border.

Solution 3:

You can detect if the mouse is over JUST the border of that element if you generate a clone element in fixed position of that exact element you are hovering but WITHOUT any padding or border, then you check on mousemove if you are over the clone AND if you are over the original elem. If you are just over the original elem, then you are obviously only hovering the border. BOOYAH!

Solution 4:

I had to tweak Ohgodwhy's answer to get the bottom and right borders to work, but this works to get see if you clicked the border on any side.

$(elmnt).click(function(e){
    var border_width = 10;
    if(e.offsetX < 0 || e.offsetX > ($(elmnt).innerWidth() - (border_width * 2)) || e.offsetY < 0 || e.offsetY > ($(elmnt).innerHeight() - (border_width * 2))){
        alert("you clicked the border");
    }
});