Question

我有一个表'网格'，有多行，比方说50，还有多列，比如50，大约是20px的正方形。用户可以单击并更改单元格bg颜色，这是相关的，因为我认为它需要保持一个表。我想让用户沿着网格'绘制'线条。是否有可能检测到他们点击或点击最近的单元格的哪一侧？所以我可以将边框设置为x像素？

Answer 1

捕获鼠标指针的x和y坐标并进行一些简单的数学计算是一件简单的事情。 E.g：

$("td").mousemove(function(e) {
    var xpos = e.pageX;
    var ypos = e.pageY;
    console.log(xpos + " " + ypos);
    if(xpos < $(this).width() / 2) {
        console.log("somewhere left");    
    } else {
        console.log("somewhere right");   
    }
});

Demo.

Answer 2

您可以通过event对象的pageX和pageY属性获取与文档相关的鼠标坐标。

从那里，您可以减去元素的offset()以获取元素相对坐标。然后，您只需要将生成的水平坐标与元素的width()的一半进行比较：

$("td").click(function(e) {
    var $this = $(this);
    if (e.pageX - $this.offset().left > $this.width() / 2) {
        // Clicked on the right side.
    } else {
        // Clicked on the left side.
    }
});

Answer 3

看看here。此示例提供绝对坐标。您必须通过一些计算来确定您的情况，以确定单击哪个单元格的区域。

Answer 4

你可以这样解决这个问题：

找到（窗口的）鼠标位置
找到与点击的单元格相关的鼠标位置

单击了哪一侧单元格

4 个答案: