マウスが要素の境界内にあるかどうかをチェック

Question

現在、マウスの位置が要素の境界内にあるかどうかを確認する方法はありますか？

提案できる機能はありますか、それとも迅速な方法はありますか？

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を合計してドキュメントにします。

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

最後の一つです：そのことについて、あなたはまたして）$ .mousemoveを（置き換えることができますが、ページをリフロー場合、あなたは再び）（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; }