JS判断鼠标从哪个方向进入DIV容器

Question

如题所述

Answer 1

这样估计只能自己写代码判断了。跟踪mousemove事件，不断判断光标位置的变化，比如如果x不断变大，y也不断变大，那么我们大致就可以断定光标轨迹是从左上到右下的。本回答被网友采纳

Answer 2

<div id="a" style="width: 200px; height: 200px; background-color: #ddd;"></div>

<script>
document.getElementById("a").onmouseenter = function(e){
var _w = parseInt(this.style.width.replace("px", ""));
var _h = parseInt(this.style.height.replace("px", ""));
var _x = this.offsetLeft;
var _y = this.offsetTop;

var _m = "";
if(e.clientX < (_x + _w) / 2) 
_m = "left";
else if(e.clientX > (_x + _w) / 2)
_m = "right";
else
_m = "center";

_m += "-";

if(e.clientY < (_y + _h) / 2)
_m += "top";
else if(e.clientY > (_y + _h) / 2) 
_m += "bottom";
else
_m += "middle";

alert(_m);
}
</script>

本回答被提问者采纳

Answer 3

<script>
document.getElementById("a").onmouseenter = function(e){
var _w = parseInt(this.style.width.replace("px", ""));
var _h = parseInt(this.style.height.replace("px", ""));
var _x = this.offsetLeft;
var _y = this.offsetTop;

var _m = "";
if(e.clientX < (_x + _w / 2)) //这里 一半只能加在自身
_m = "left";
else if(e.clientX > (_x + _w / 2))
_m = "right";
else
_m = "center";

_m += "-";

if(e.clientY < (_y + _h / 2))
_m += "top";
else if(e.clientY > (_y + _h / 2))
_m += "bottom";
else
_m += "middle";

alert(_m);
}
</script>