检查鼠标是否在元素的范围内

Question

javascript中有没有一种方法可以检查鼠标当前是否位于元素范围内？

有没有可以建议的功能或快速的方法？

if ( document.mouse.x > ele.offsetLeft && document.mouse.x < ele.offsetRight ...check y bounds)
{
  return true;
}
else return false;

Answer 1

您可以存储边界坐标和鼠标坐标。 这样一来，您便可以随时检查它。

var coords = [0,0];
$(document).mousemove(function(e){
    var C = coords; // one global lookup
    C[0] = e.pageX; 
    C[1] = e.pageY; 
});

var box_area = {x1:0, y1:0, x2:0, y2:0};
var box = $('#box');
function store_boundary() {
    var B = box, O = B.offset();
    box_area = { 
        x1: O.left, 
        y1: O.top,
        x2: O.left + B.width(),
        y2: O.top + B.height()
    };
}
store_boundary();

function is_mouse_in_area() {
    var C = coords, B = box_area;
    if (C[0] >= B.x1 && C[0] <= B.x2) {
        if (C[1] >= B.y1 && C[1] <= B.y2) {
            return true;
        }
    }
    return false;
};

我想给你一个没有jQuery的答案，但我认为.offset（）（相对于文档的左/上坐标）确实做得很好并且经过了很好的测试。 但是，您可以编写自己的文件，将offsetLeft和offsetTop总计为文档。 为此，您还可以将$ .mousemove（）替换为：

document.addEventListener('mousemove',function(e){ ... },false);

最后一件事：如果要重排页面，则需要再次调用store_boundary（）。

Answer 2

var t = $("#element"); var mouseX = event.clientX + document.body.scrollLeft; var mouseY = event.clientY + document.body.scrollTop; if (mouseX >= t.offset().left && mouseX <= t.offset().left + t.width() && mouseY >= t.offset().top && mouseY <= t.offset().top + t.height()) { return true; }