怎么判断鼠标从什么方向进入一个元素呢？
就是判断鼠标是从上下左右哪个方向进入的。。。。
我想用onmouseover，但是貌似不准确～
也不知道该怎么计算～:o
谁有好点的建议啊？
[解决办法]
<!DOCTYPE HTML><html> <head> <meta charset="gb2312" /> <title></title> <style> div { width:200px; height:200px; border:1px solid red; margin:100px; } </style> </head> <body> <div id="test"></div> <script> var $ = function(id){ return document.getElementById(id); }; var obj = $('test'); var h = obj.offsetHeight; var w = obj.offsetWidth; obj.onmouseover = function(e){ e = window.event || e; var x = e.offsetX || (getOffset(e).offsetX); var y = e.offsetY || (getOffset(e).offsetY); if( x <= w/2 ){ this.innerHTML = 'left' }else{ this.innerHTML = 'right' } if( y <= h/2 ){ this.innerHTML += ' top' }else{ this.innerHTML += ' bottom' } } function getOffset(e) { var target = e.target; if (target.offsetLeft == undefined) { target = target.parentNode; } var pageCoord = getPageCoord(target); var eventCoord = { x: window.pageXOffset + e.clientX, y: window.pageYOffset + e.clientY }; var offset = { offsetX: eventCoord.x - pageCoord.x, offsetY: eventCoord.y - pageCoord.y }; return offset; } function getPageCoord(element) { var coord = {x: 0, y: 0}; while (element) { coord.x += element.offsetLeft; coord.y += element.offsetTop; element = element.offsetParent; } return coord; } </script> </body></html>
[解决办法]
onmousemove 设置变量i 让move只执行2次 然后移除move事件
根据 执行的2次move事件的鼠标坐标位置 比对方向
[解决办法]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript">function addEventListener(control, eventName, fn) { if (window.attachEvent) { control.attachEvent('on' + eventName, function(e) {fn.call(control, e);}); } else if (window.addEventListener) { control.addEventListener(eventName, fn, false); } else { control['on' + eventName] = fn; }}function getPosition(target) { var left = 0, top = 0; do { left += target.offsetLeft || 0; top += target.offsetTop || 0; target = target.offsetParent; } while(target); return { left: left, top: top };}function mousePosition(e) { var event = e || window.event; if (event.pageX || event.pageY) { return {x:event.pageX, y:event.pageY}; } return { x: event.clientX + document.body.scrollLeft - document.body.clientLeft, y: event.clientY + document.body.scrollTop - document.body.clientTop };}var FocusType = { LEFT: "left", RIGHT: "right", TOP: "top", BOTTOM: "bottom"};function FocusListener(target) { this.target = target; this.handler = []; this.lastMouseInfo = null; this.isOutSide = true; this.initialize();}FocusListener.prototype = { initialize: function() { addEventListener(document, 'mousemove', this.eventWrapper(this.mouseMoveHandler)); }, addHandlerListener: function(fn) { this.handler.push(fn); }, eventWrapper: function(fn) { var target = this; return function(e) { fn.call(target, e); }; }, mouseMoveHandler: function(e) { var targetPos = getPosition(this.target); targetPos.width = this.target.offsetWidth; targetPos.height = this.target.offsetHeight; var topLine = new LineEquation(targetPos.left, targetPos.top, targetPos.left + targetPos.width, targetPos.top, FocusType.TOP); var leftLine = new LineEquation(targetPos.left, targetPos.top, targetPos.left, targetPos.top + targetPos.height, FocusType.LEFT); var rightLine = new LineEquation(targetPos.left + targetPos.width, targetPos.top, targetPos.left + targetPos.width, targetPos.top + targetPos.height, FocusType.RIGHT); var bottomLine = new LineEquation(targetPos.left, targetPos.top + targetPos.height, targetPos.left + targetPos.width, targetPos.top + targetPos.height, FocusType.BOTTOM); var lineArrs = [topLine, leftLine, bottomLine, rightLine]; var mouseInfo = mousePosition(e); if (this.lastMouseInfo == null) { this.lastMouseInfo = mouseInfo; } if (mouseInfo.x >= targetPos.left && mouseInfo.x <= targetPos.left + targetPos.width && mouseInfo.y >= targetPos.top && mouseInfo.y <= targetPos.top + targetPos.height) { if (isOutSide == false || mouseInfo == this.lastMouseInfo) { return; } var crossType = null; var lineEquation = new LineEquation(mouseInfo.x, mouseInfo.y, this.lastMouseInfo.x, this.lastMouseInfo.y); var crossType = null; for (var index = 0; index < lineArrs.length; index++) { crossType = judgeCrossType(lineEquation, lineArrs[index], mouseInfo, this.lastMouseInfo); if (crossType != null) { break; } } function judgeCrossType(lineEquation, line, mouseInfo, lastMouseInfo) { var cross = lineEquation.getCrossPoint(line); if (cross != LineCrossType.NO_CROSS) { if (cross == LineCrossType.INFINITE || inRange(cross, mouseInfo.x, mouseInfo.y, lastMouseInfo.x, lastMouseInfo.y)) { return line.crossType; } } return null; } function inRange(cross, x1, y1, x2, y2) { var maxX = Math.max(x1, x2); var maxY = Math.max(y1, y2); var minX = Math.min(x1, x2); var minY = Math.min(y1, y2); if (cross.x >= minX && cross.x <= maxX && cross.y >= minY && cross.y <= maxY) { return true; } return false; } var handlers = this.handler; for (var index = 0; index < handlers.length; index++) { handlers[index](crossType); } isOutSide = false; } else { isOutSide = true; } this.lastMouseInfo = mouseInfo; }};function LineEquation(x1, y1, x2, y2, crossType) { this.crossType = crossType; if (x1 == x2) { this.k = null; this.b = x1; } else { this.k = (y1 - y2) / (x1 - x2); this.b = y1 - this.k * x1; }}var LineCrossType = { INFINITE: "infinite", NO_CROSS: "no cross"};LineEquation.prototype = { getCrossPoint: function(line) { if (line.k == null && this.k == null) { if (line.b == this.b ) { return LineCrossType.INFINITE; } else { return LineCrossType.NO_CROSS; } } else { var x; var y; if (line.k == null) { x = line.b; y = line.b * this.k + this.b; } else if (this.k == null) { x = this.b; y = this.b * line.k + line.b; } else { x = (line.b - this.b) / (this.k - line.k); y = line.k * x + line.b; } return {x: x, y: y}; } }};window.onload = function() { var testDiv = document.getElementById("test"); var listener = new FocusListener(testDiv); listener.addHandlerListener(function(crossType) { alert(crossType); });}</script></head><body> <div style="width: 300px; height: 200px; border-style: solid; border-width:1px; left:300px; top:300px;" id="test"></div></body></html>