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;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获取鼠标点击事件的相对位置的更多相关文章
- Listbox与dataGridView的获取鼠标点击事件的区别！！！
lisxian.SelectedIndex = index; Listbox获取鼠标的代码!!!! DataGridViewRow currenRow = this.dgvxian3.Rows[ind ...
- JS控制鼠标点击事件
鼠标点击事件就是当鼠标点击元素时,就会出现另一个窗口,类似于百度首页中右上角的“登录”这个按钮,当鼠标点击 登录时,就会出现登录窗口.大体的意思就是这样,直接上代码了,简单易懂. <!DOCTY ...
- js获取鼠标点击的对象,点击另一个按钮删除该对象
作为js的一名新手,对于所谓的event的了解并不是太多,仅仅根据视频教学中的例子模仿着,写了诸如: function funcname(e) { e=window.event||event };的函 ...
- 获取鼠标点击相对于Canva位置的2种方法
如果给Canvas添加 onmousedown事件,获取到的鼠标位置都是相对于当前文档的位置(x,y):
- Js 模拟鼠标点击事件
var obj = document.getElementById('go'); if(document.all){ obj.click(); }else{ var e = document.crea ...
- js 获取页面高度和宽度(兼容 ie firefox chrome),获取鼠标点击位置
<script> //得到页面高度 var yScroll = (document.documentElement.scrollHeight >document.documentEl ...
- MacOS获取辅助功能权限控制鼠标点击事件
昨晚玩一个模拟经营的游戏,由于升级太慢我就不停的种树卖树来换取经验值.不过重复点击10几分钟后,实在受不了.网上本来准备找个鼠标自动点击的软件用用.结果没找到趁手的.如是自己写了个. 自己设置需要点击 ...
- html5中canvas的使用 获取鼠标点击页面上某点的RGB
1.html5中的canvas在IE9中可以跑起来.在IE8则跑不起来,这时候就需要一些东西了. 我推荐这种方法,这样显得代码不乱. <!--[if lt IE9]> <script ...
- js获取鼠标位置的各种方法
在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊 ...
随机推荐
- js异步处理工作机制
js异步处理工作机制 从基础的层面来讲,理解JavaScript的定时器是如何工作的是非常重要的.计时器的执行常常和我们的直观想象不同,那是因为JavaScript引擎是单线程的.我们先来认识一下 ...
- shell邮件发送功能实现
本文中以163邮箱为例,测试shell邮件发送功能.常见的工具有:mailx.sendmail.mutt等. 1.设置邮件客户端 (1)启用pop3.smtp服务,以支持第三方客户端支持 (2)设置授 ...
- RaspberryPi.1.开机与远程桌面
raspberry 3b+ ------------------------------------------------------------------------------- 写系统 有 ...
- 基于Window10搭建android开发环境
一.安装JDK 1.下载(网页链接) 2.双击安装文件进行安装,安装在合适目录,例如:D:\Java\jdk1.8.0_201与D:\Java\jre1.8.0_201 3.设置环境变量 3.1.JA ...
- VAE(Variational Autoencoder)的原理
Kingma, Diederik P., and Max Welling. "Auto-encoding variational bayes." arXiv preprint ar ...
- Java与PHPweb开发比较
参考:https://blog.csdn.net/loophome/article/details/83413878
- Java 组合
组合: 在新类中产生现有类的对象,由于新的类是由现有类的对象所组成,所以这种方法称为组合 组合和继承都允许在新的类中放置对象,组合时显示的这样做,而继承则是隐式的这样做 组合技术通常用于想在新类中使用 ...
- 翻译 – 从心理学角度看UX设计
本文是一篇非常不错的关于用户体验设计的文章,本文作者是一个心理学家,他从他所研究的领域去看到用户行为,用户体验,相信会给你带来不一样的观念与知识.翻译水平有限,若有不准确之处欢迎指正. ——————— ...
- html屏幕旋转事件监听
近期做微信服务号开发,在做图片展示的时候需要横竖屏的检测实现图片大小不同的展示. 添加屏幕旋转事件侦听,可随时发现屏幕旋转状态(左旋.右旋还是没旋). 摘自:http://bbs.phonegap10 ...
- Node.js包的依赖及版本号（转）
原文: http://www.cnphp6.com/archives/64130 Node.js最重要的一个文件就是package.json,其中的配置参数决定了功能.例如下面就是一个例子 { &q ...