卢噜噜噜噜
卢噜噜噜噜

js获取鼠标所在的位置

我这里写的代码是运用在canvas画布中的，获取鼠标位置。其实获取鼠标位置在不在canvas中道理都是相同的。
以下是代码：


<html>
<head>
    <title>title>
    <meta charset="utf-8" />
    <script type="text/javascript">
        function $$(id) {
            return document.getElementById(id);
        }

        function getMouse(element) {
            var mouse = {x : 0,y:0};
            element.addEventListener("mousemove",function (e) {
                var x,y;
                var e = e||window.event;
                if(e.pageX||e.pageY){
                    x = e.pageX;/*鼠标指针的位置相对于文档的左边缘*/
                    y = e.pageY;/*同理，相对于文档的上边缘*/
                }
                else {/*处理兼容问题*/
                    x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
                    /*clientX，clientY：鼠标相对于浏览器的位置*/
                    y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
                    /*scrollLeft，scrollTop：左右滚动条、上下滚动条滚动了的位置*/
                }
                x -= element.offsetLeft;
                /*offsetLeft是离其最近的已经定位的元素，如果没有就相对于body元素计算*/
                y -= element.offsetTop;
                mouse.x = x;
                mouse.y = y;
            },false);
            return mouse;
        }

        window.onload = function () {
            var cnv = $$("canvas");
            var cxt = cnv.getContext("2d");

            var txt = $$("txt");
            var mouse = getMouse(cnv);
            cnv.addEventListener("mousemove", function () {
                txt.innerHTML = "鼠标当前坐标为：（" + mouse.x + "," + mouse.y + "）";
            }, false);
        }
    script>
head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px solid silver;">canvas>
    <p id="txt">鼠标当前坐标为：p>
body>
html>

最后，IE8，chrome浏览器下是有event对象，但是firefox没有，因此就有兼容性的问题。在代码中，if中的代码就是在IE8，chrome使用event的时候的代码，else后的代码则是为了兼容这个问题的代码。

你可能感兴趣的:(js)

按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他