怎么判断鼠标从什么方向进入一个元素呢？

就是判断鼠标是从上下左右哪个方向进入的。
我想用onmouseover，但是貌似不准确～
也不知道该怎么计算～:o
谁有好点的建议啊？

解决方案 »

  1.   


    <!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>这个意思？
      

  2.   

    onmousemove   设置变量i  让move只执行2次 然后移除move事件根据 执行的2次move事件的鼠标坐标位置 比对方向 
      

  3.   

    <!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>以上方法支持全浏览器，并把判断完后的逻辑独立出来放在listener.addHandlerListener(function(crossType) {中独立处理
      

  4.   

    5楼的，你的怎么不支持FIREFOX