支付宝扫码
领取余额宝体验金

轻云博客 > Jquery+Ajax学习 > 获取鼠标点击时的坐标

获取鼠标点击时的坐标

作者:Aisencici / 日期:2015-6-22 8:47:00 / 分类:Jquery+Ajax学习 / 浏览:1631

获取鼠标点击时的坐标

最近由于项目需求需要获取鼠标点击时的坐标进行划线

最初设计的是直接获取坐标:

 function elemOffset(elem) {
            var t = elem.offsetTop;
            var l = elem.offsetLeft;
            while (elem = elem.offsetParent) {
                t += elem.offsetTop;
                l += elem.offsetLeft;
            }
            return {
                x: l,
                y: t
            };
        }

            绝对坐标划线
            $("#linr").css("top", (elemOffset(ob).y + 20) + "px");
            $("#linr").css("left", "0");
            $("#lint").css("display", "block");
            $("#lint").css("position", "absolute");
            $("#lint").css("left", (elemOffset(ob).x + 40) + "px");
            $("#lint").css("top", "0");

相对坐标

        //var box = document.getElementById("box");
        //var pos = box.getBoundingClientRect();
        //box.innerHTML = "top:" + pos.top +
        //  "left:" + pos.left +
        //  "bottom:" + pos.bottom +
        //  "right:" + pos.right +
        //  "width:" + pos.width +
        //  "height:" + pos.height

//相对坐标划线
            $("#linr").css("top", (ob.getBoundingClientRect().top+20) + "px");
            $("#linr").css("left", "0");
            $("#lint").css("display", "block");
            $("#lint").css("position", "absolute");
            $("#lint").css("left", (ob.getBoundingClientRect().left+40) + "px");
            $("#lint").css("top", "0");

======================================================

本文标签:
From:
分享到: