Question

有人知道如何通过jQuery或JavaScript检测鼠标是否在列边框或单元格边框上？

我想在特定的表上实现一个调整列的列。

感谢任何帮助。

Answer 1

你应该检查offsetX和offsetY是否小于border-width，如果是，你在边框中，还要检查offsetX是否大于innerWidth或者offsetY是否大于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

Answer 2

你可以这样做：

在元素
检查鼠标位置。
如果元素的offset（）+ outerWidth（）与鼠标位置相同，则表示您在边框上。

Answer 3

你可以检测到鼠标是否已经超过该元素的边界，如果你在你正在悬停的那个确切元素的固定位置生成一个克隆元素但是没有任何填充或边框，那么你检查鼠标移动是否超过了克隆并且如果你超过了原来的元素。如果你刚刚超过原来的元素，那么你显然只是在边境上空盘旋。 BOOYAH！

Answer 4

我必须调整Ohgodwhy的答案才能使上下边框正常工作，但这可以查看您是否单击了任何一侧的边框。

$(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");
    }
});

检测鼠标是否在列边框上方

4 个答案: