如何捕获 javascript 鼠标在层里的坐标

支持，
刚好昨天做了个sample,帖上来给楼主参考一下。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Test</title>
        <style>
            .cls1 {
                position: absolute;
                background: red;
                left: 50px;
                top: 100px;
                width: 200px;
                height: 200px;
                border: double;
            } .cls2 {
                position: absolute;
                background: blue;
                left: 150px;
                top: 200px;
                width: 200px;
                height: 200px;
                border: double;
            }
        </style>
    </head>
    <script type="text/javascript">
        var $ = document.getElementById;
        var msgBar;
        var dx, dy;
        function reIndex(){
            var lst = document.all;
            var o = window.event.srcElement;
            var z = o.style.zIndex;
            
            for (var i = 0; i < lst.length; i++) {
                if (lst[i] != o) {
                    if (lst[i].style.zIndex > z) {
                        lst[i].style.zIndex--;
                    }
                }
            }
            o.style.zIndex = lst.length;
        }
        
        function showPos(){
            var e = window.event;
var x = e.clientX - e.srcElement.offsetLeft;
var y = e.clientY - e.srcElement.offsetTop;
            msgBar.innerHTML = e.srcElement.id + ":" + e.type + "(x=" + x + "; y=" + y + ")";
        }
        
        window.onload = function(){
            msgBar = $("msgbar");
            var o1 = $("div1");
            var o2 = $("div2");
            o1.attachEvent("onmousedown", function(){
reIndex();
                showPos();
            })
            o2.attachEvent("onmousedown", function(){
reIndex();
                showPos();
            })
        }
    </script>
    <body>
        <div id="msgbar">
        </div>
        <div id="div1" class="cls1">
        </div>
        <div id="div2" class="cls2">
        </div>
    </body>
</html>

解决方案 »

  1.   

    <!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=gb2312">
    <title> </title>
    <script>
    function show(e){
    e = e || window.event;
    var target = e.target || e.srcElement;
    var offsetTop = target.offsetTop;
    var offsetLeft = target.offsetLeft;
    while(target = target.offsetParent){
    if(target.id == 'con'){
    break;
    }
    offsetTop += target.offsetTop;
    offsetLeft += target.offsetLeft;
    }
    alert((e.clientX-offsetLeft)+":"+(e.clientY-offsetTop));
    //alert(offsetTop+":"+offsetLeft);
    }
    </script>
    </head>
    <body>
    <div id="con" style="position:absolute; left:100px; top:200px; width:500px; height:500px; background-color:#096;" onClick="show(event)"></div>
    </body>
    </html>
      

  2.   

    前面的代码有问题。
    改进了一下.
    偷懒，只做了IE的。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
        <head>
            <title>Test</title>
            <style>
                .cls1 {
                    position: absolute;
                    background: red;
                    left: 50px;
                    top: 100px;
                    width: 200px;
                    height: 200px;
                    border: double;
                } .cls2 {
                    position: absolute;
                    background: blue;
                    left: 150px;
                    top: 200px;
                    width: 200px;
                    height: 200px;
                    border: double;
                }
            </style>
        </head>
        <script type="text/javascript">
            var $ = document.getElementById;
            var msgBar;
            var dx, dy;
            function reIndex(){
                var lst = document.all;
                var o = window.event.srcElement;
                var z = o.style.zIndex;
                
                for (var i = 0; i < lst.length; i++) {
                    if (lst[i] != o) {
                        if (lst[i].style.zIndex > z) {
                            lst[i].style.zIndex--;
                        }
                    }
                }
                o.style.zIndex = lst.length;
            }
            
            function getAbsPoint(e){
                var x = e.offsetLeft, y = e.offsetTop;
                var rc = e.getBoundingClientRect();
                return {
                    "x": rc.left,
                    "y": rc.top
                };
            }
            
            function showPos(){
                var e = window.event;
                var offset = getAbsPoint(e.srcElement);
                var x = e.clientX - offset.x;
                var y = e.clientY - offset.y;
                msgBar.innerHTML = e.srcElement.id + ":" + e.type + "(x=" + x + "; y=" + y + ")";
            }
            
            window.onload = function(){
                msgBar = $("msgbar");
                var o1 = $("div1");
                var o2 = $("div2");
                o1.attachEvent("onmousedown", function(){
                    reIndex();
                    showPos();
                })
                
                o1.attachEvent("onmousemove", function(){
                    showPos();
                })
                o2.attachEvent("onmousedown", function(){
                    reIndex();
                    showPos();
                })
                o2.attachEvent("onmousemove", function(){
                    showPos();
                })
            }
        </script>
        <body>
            <div id="msgbar">
            </div>
            <div id="div1" class="cls1">
            </div>
            <div id="div2" class="cls2">
            </div>
        </body>
    </html>