javaScript中获取鼠标位置的理解

获取鼠标坐标值的总结为了避免混淆知识点

通过《javaScript高级程序设计》查到这些

event.clientX event.clientY event.pageX event.pageY event.screenX event.screenY

document.documentElement.scrollLeft || document.body.sctollLeft document.documentElement.scrollTop || document.body.scrollTop

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>mousePosition</title>
</head>
<body style="height:1000px;padding-top:400px;">
<h1>html鼠标位置有：客户区（视口）坐标位置，html页面坐标位置，屏幕坐标位置</h1>
<h3>鼠标相对于客户区的位置：<span id="client"></span>　所有的浏览器都支持这两个属性的哦！<h3>
<h3>鼠标相对于document的位置：<span id="page"></span>　IE8以前的浏览器不支持这两个属性！<h3>
<h3>鼠标相对于屏幕的位置：<span id="screen"></span>　所有的浏览器都支持这两个属性的哦！<h3>
<P>!!!document.body （混杂模式）或 document.documentElement （标准模式）</p>
<script type="text/javascript">
    var oClient = document.getElementById('client');
    var oPage = document.getElementById('page');
    var oScreen = document.getElementById('screen');
    document.onmousemove = function(){
        oClient.innerHTML = 'clientX='+getPointerPostion().clientX+';clientY='+getPointerPostion().clientY;
        oPage.innerHTML = 'pageX='+getPointerPostion().pageX+';pageY='+getPointerPostion().pageY;
        oScreen.innerHTML = 'screenX='+getPointerPostion().screenX+';screenY='+getPointerPostion().screenY;
    }
    function getElementObject(event){
        return event || window.event;
    }
    function getPointerPostion(e){
        e = e || getElementObject(e);
        var clientX = e.clientX;
        var clientY = e.clientY;
        var pageX = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
        var pageY = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop));
        var screenX = e.screenX;
        var screenY = e.screenY;
        return {
            'clientX':clientX,
            'clientY':clientY,
            'pageX':pageX,
            'pageY':pageY,
            'screenX':screenX,
            'screenY':screenY
        };
    }
</script>
</body>
<html>

 

posted @ 2016-09-24 12:43  Small_Potato_IT  阅读(190)  评论(0)  编辑  收藏  举报