<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;width:800px;height:800px;"> </div>
<div  id="area"></div>
<div style="width:1400px;height:300px;border:1px solid red;padding-left:1200px;">
 <div id="d" style="width:200px;height:200px;border:1px solid green;padding:10px;cursor:hand;" onclick="c()">这里是图片，因为我用div边框1px，所以两个div会有2px的位置偏移，你可以自己调整</div>
</div>
</body>
</html>

js获取鼠标点击事件的相对位置的更多相关文章

  1. Listbox与dataGridView的获取鼠标点击事件的区别！！！

    lisxian.SelectedIndex = index; Listbox获取鼠标的代码!!!! DataGridViewRow currenRow = this.dgvxian3.Rows[ind ...

  2. JS控制鼠标点击事件

    鼠标点击事件就是当鼠标点击元素时,就会出现另一个窗口,类似于百度首页中右上角的“登录”这个按钮,当鼠标点击 登录时,就会出现登录窗口.大体的意思就是这样,直接上代码了,简单易懂. <!DOCTY ...

  3. js获取鼠标点击的对象,点击另一个按钮删除该对象

    作为js的一名新手,对于所谓的event的了解并不是太多,仅仅根据视频教学中的例子模仿着,写了诸如: function funcname(e) { e=window.event||event };的函 ...

  4. 获取鼠标点击相对于Canva位置的2种方法

    如果给Canvas添加 onmousedown事件,获取到的鼠标位置都是相对于当前文档的位置(x,y):

  5. Js 模拟鼠标点击事件

    var obj = document.getElementById('go'); if(document.all){ obj.click(); }else{ var e = document.crea ...

  6. js 获取页面高度和宽度(兼容 ie firefox chrome),获取鼠标点击位置

    <script> //得到页面高度 var yScroll = (document.documentElement.scrollHeight >document.documentEl ...

  7. MacOS获取辅助功能权限控制鼠标点击事件

    昨晚玩一个模拟经营的游戏,由于升级太慢我就不停的种树卖树来换取经验值.不过重复点击10几分钟后,实在受不了.网上本来准备找个鼠标自动点击的软件用用.结果没找到趁手的.如是自己写了个. 自己设置需要点击 ...

  8. html5中canvas的使用 获取鼠标点击页面上某点的RGB

    1.html5中的canvas在IE9中可以跑起来.在IE8则跑不起来,这时候就需要一些东西了. 我推荐这种方法,这样显得代码不乱. <!--[if lt IE9]> <script ...

  9. js获取鼠标位置的各种方法

    在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊 ...

随机推荐

  1. iOS 根据生日得到生肖，星座，年龄的算法

    根据用户生日,得到相应的年龄,星座和生肖.有的项目中可能会用到,贴出来共享. 得到年龄,这个很简单了: - (void)getAgeWith:(NSDate*)birthday{ //日历 NSCal ...

  2. Linux下内存泄漏工具【转】

    转自:http://www.cnblogs.com/guochaoxxl/p/6970090.html 概述 内存泄漏(memory leak)指由于疏忽或错误造成程序未能释放已经不再使用的内存的情况 ...

  3. 终极利器！利用appium和mitmproxy登录获取cookies

    环境搭建 参考我之前写的https://www.cnblogs.com/c-x-a/p/9163221.html appium 代码start_appium.py # -*- coding: utf- ...

  4. [SDOI2009]HH去散步 「矩阵乘法计数」

    计数问题也许可以转化为矩阵乘法形式 比如若该题没有不能在一条边上重复走的条件限制,那么直接将邻接矩阵转化为矩阵乘法即可 故 矩阵乘法计数 对于计数问题,若可以将 \(n\) 个点表示成 \(n \ti ...

  5. 设置adb server的端口号

    在操作系统的系统环境里面,加一个环境变量: ANDROID_ADB_SERVER_PORT,值为9999,看自己喜欢.

  6. 创建.symlnk文件

    本文转自:https://zhidao.baidu.com/question/1695955535823679548.html 1 2 3 4 5 6 7 8 9 10 11 创建符号链接.   MK ...

  7. Python_oldboy_自动化运维之路_线程，进程，协程（十一）

    本节内容: 线程 进程 协程 IO多路复用 自定义异步非阻塞的框架 线程和进程的介绍: 举个例子,拿甄嬛传举列线程和进程的关系: 总结:1.工作最小单元是线程,进程说白了就是提供资源的 2.一个应用程 ...

  8. 在局域网内实现https安全访问

    在局域网内实现https安全访问 准备原料 服务器 resin (当然也可以是tomcat,这里以resin为例) 安装jdk 域名 (随便写一个就行,因为是内网使用,不会被校验) 生成证书 第一步: ...

  9. SNMP中MIB2所有主要节点

    系统组:system组包含以下对象集(.1.3.6.1.2.1.1): 对象名:sysDescr(1) OID:system.1 对象类型:DisplayString[255] 访问模式:只读 描述: ...

  10. 无效GRANT语句导致主从同步断开

    最近遇到一个主从同步断开的案例,是由于在执行GRANT语句时,授权对象给错了,也就可以理解为无效的GRANT语句,我们收到slave库同步断开的报警信息,然后去找问题,发现binlog有报错,报错提示 ...