如何判断鼠标从什么方向进入一个元素呢-JavaSript-爱易网页

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

日期：2014-05-16　浏览次数：20407 次

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

------解决方案--------------------

HTML code


<!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事件的鼠标坐标位置 比对方向

------解决方案--------------------

JScript code<!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: "r

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

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

相关资料更多>

推荐阅读更多>