Javascript获取当前鼠标在元素内的坐标

最新推荐文章于 2024-09-11 15:33:18 发布

weixin_30852367

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量595

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/nb08611033/p/10749385.html

版权

转载自：https://jingyan.baidu.com/article/c1a3101e5a32b3de656debbd.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>获取鼠标在Canvas中的坐标位置</title>
    <style>
    body{text-align: center;}
    #canvas {
        border: 1px solid #ccc;
        width: 300px;
        height: 300px;
        overflow: hidden;
        margin: 0 auto;
    }
    </style>
</head>
<body>
    <div id="tips"></div>
    <div id="canvas" onmousemove="get_canvas(event,this)" onclick="test(event);"></div>
</body>
</html>
<script>
function get_canvas(ev, obj) {

    m_clientX = ev.clientX - obj.offsetLeft;

    m_clientY = ev.clientY - obj.offsetTop;

    // clientX/Y 鼠标相对当前页面body可视区域左上角的坐标
    // offsetLeft/Top 元素左上角相对父元素左上角的距离

    document.getElementById("tips").innerHTML = "当前坐标：X：" + m_clientX + " ,Y：" + m_clientY;
}
</script>