zoukankan      html  css  js  c++  java
  • js获取鼠标点击事件的相对位置

    <html>
    <head>
    <title>位置</title>
    <script language="javascript" type="text/javascript">
    function m(){
    document.getElementById("area").innerHTML=event.clientX +" , "+event.clientY;
    }

    搜索


    function c(){
    var objTop = getOffsetTop(document.getElementById("d"));//对象x位置
    var objLeft = getOffsetLeft(document.getElementById("d"));//对象y位置

    var mouseX = event.clientX+document.body.scrollLeft;//鼠标x位置
    var mouseY = event.clientY+document.body.scrollTop;//鼠标y位置
    //计算点击的相对位置
    var objX = mouseX-objLeft;
    var objY = mouseY-objTop;
    clickObjPosition = objX + "," + objY;

    alert(clickObjPosition);
    }

    function getOffsetTop(obj){
    var tmp = obj.offsetTop;
    var val = obj.offsetParent;
    while(val != null){
    tmp += val.offsetTop;
    val = val.offsetParent;
    }
    return tmp;
    }
    function getOffsetLeft(obj){
    var tmp = obj.offsetLeft;
    var val = obj.offsetParent;
    while(val != null){
    tmp += val.offsetLeft;
    val = val.offsetParent;
    }
    return tmp;
    }
    </script>

    </head>
    <body style="margin:0px;" onmousemove="m();">
    <div style="padding:90px;border:1px solid #ccc;font-size:36px;800px;height:800px;"> </div>
    <div id="area"></div>
    <div style="1400px;height:300px;border:1px solid red;padding-left:1200px;">
    <div id="d" style="200px;height:200px;border:1px solid green;padding:10px;cursor:hand;" onclick="c()">这里是图片,因为我用div边框1px,所以两个div会有2px的位置偏移,你可以自己调整</div>
    </div>
    </body>
    </html>
  • 相关阅读:
    ThingJS之二十六问
    物联网开发,thingjs让您事半功倍!
    thingjs在线开发平台介绍
    jQuery· CSS样式方法
    jQuery属性
    jQuery效果
    JS事件委托中同一个标签执行不同操作
    js+php+mysql实现的学生成绩管理系统
    函数防抖
    两数之和
  • 原文地址:https://www.cnblogs.com/zhwl/p/4539818.html
Copyright © 2011-2022 走看看