代码如下：

<!doctype html>

<html>

<head>

　　<meta charset="utf-8">

　　<title>获取鼠标在Canvas中的坐标位置</title>

　　<style>

　　　　#canvas{

　　　　　　border:1px solid #ccc;

　　　　　　width:300px;

　　　　　　height:300px;

　　　　　　overflow:hidden;

　　　　}

　　</style>

　　<script>

　　　　function get_canvas(ev,obj){

　　　　 m_clientX = ev.clientX-obj.offsetLeft;

　　　　 m_clientY = ev.clientY-obj.offsetTop;

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

　　　　}

　　</script>

</head>

<body>

　　<div id="tips"></div>

　　<div id="canvas" onmousemove="get_canvas(event,this)"></div>

</body>

</html>

兼容IE8+

Javascript获取当前鼠标在元素内的坐标定位的更多相关文章

  1. JavaScript获取HTML DOM节点元素详解(转)

    在Web运用程序特别是Web 2.0程序开发中,经常要获取页面中某个元素,然后更新该元素的样式.内容等.如何获取要更新的元素,是首先要处理的疑问. 51CTO推荐阅读:JavaScript DOM文档 ...

  2. javascript获取数组最后一个元素（三种方法）

    JavaScript 获取Array末尾元素 一.JavaScript pop() 方法 pop() 方法用于删除并返回数组的最后一个元素. 注意:pop() 方法将删除 arrayObject 的最 ...

  3. javascript 获取父页面中元素对象方法

    父页面中: <input type="hidden" id="areaID" value="test1"> <iframe ...

  4. [JavaScript] 获取数组中相同元素的个数

    /** * 获取数组中相同元素的个数 * @param val 相同的元素 * @param arr 传入数组 */ function getSameNum(val,arr){ processArr ...

  5. JavaScript(获取或设置html元素的宽,高,坐标)，确定和判断鼠标是否在元素内部，二级导航菜单鼠标离开样式问题解决

    设置: document.getElementById('id').style.width=value    document.getElementById('id').style.height=va ...

  6. 19 01 11 javascript 获取某一种元素(所有的标签) 以及字符串处理的方法

    获取元素方法二 可以使用内置对象document上的getElementsByTagName方法来获取页面上的某一种标签,获取的是一个选择集,不是数组,但是可以用下标的方式操作选择集里面的标签元素. ...

  7. JavaScript获取css 行间样式，内连样式和外链样式的方式

    [行间样式获取] <div id='div1' style="backgroud:red">测试</div> <script> var odiv ...

  8. jquery 获取鼠标和元素的坐标点

    获取当前鼠标相对img元素的坐标 $('img').mousemove(function(e) { varpositionX=e.pageX-$(this).offset().left; //获取当前 ...

  9. 详细解析 JavaScript 获取元素的坐标

    引言 最近突然看到了有关图片懒加载的问题,大致意思就是初始状态下页面只加载浏览器可视区域的图片,剩余图片在当浏览器可视区域滚动到其位置时才开始加载.貌似现在许多大型网站都有实现懒加载,所以我便就此问题 ...

随机推荐

  1. 1012 The Best Rank (25分) vector与结构体排序

    1012 The Best Rank (25分)   To evaluate the performance of our first year CS majored students, we con ...

  2. python爬虫（六） Cookie

    什么是Cookie 在网站中,http的请求通常是无状态的(第一个和服务器连接并且登录之后,此时服务器知道是哪个用户,但是当第二次请求服务器时,服务器依然不知道当前请求的是哪个用户),cookie就是 ...

  3. 37 java序列化与反序列化

    一.java序列化与反序列化 1.序列化: 是指把java对象转换为字节序列的过程: 2.反序列化:是指把字节序列恢复为java对象的过程. 二.为什么要序列化 我们知道,当两个进程进行远程通信时,可 ...

  4. 用instsrv.exe+srvany.exe将应用程序安装为windows服务

    下载 链接:https://pan.baidu.com/s/1gKu_WwVo-TeWXmrGAr9qjw 提取码:s1vm 用instsrv.exe安装srvany.exe 将instsrv.exe ...

  5. 「luogu4366」最短路

    「luogu4366」最短路 传送门 直接连边显然不行,考虑优化. 根据异或的结合律和交换律等优秀性质,我们每次只让当前点向只有一位之别的另一个点连边,然后就直接跑最短路. 注意点数会很多,所以用配对 ...

  6. redis 之 redis主从复制

    Redis集群中的数据库复制是通过主从同步来实现的 主节点(Master)把数据分发给从节点(Slave) 主从同步的好处在于高可用,Redis节点有冗余设计 主从复制的原理:1. 从服务器向主服务器 ...

  7. php后门拿下当前目录

    Weevely是一个模拟类似telnet的连接的隐形PHP网页shell.它是Web应用程序后期开发的必备工具,可以作为隐形后门程序,也可以作为一个web外壳来管理合法的Web帐户,甚至可以免费托管. ...

  8. Windows下ARP协议的工作原理简介

       ARP协议(Address Resolve Protocol,地址解析协议)工作在TCP/IP协议的第二层-数据链路层,用于将IP地址转换为网络接口的硬件地址(媒体访问控制地址,即MAC地址). ...

  9. Oracle如何修改密码？如何解锁scott用户？

    修改密码: scott用户的密码不对,进入管理员用户,修改scott用户密码即可 或者这样修改密码:在运行栏里面敲:sqlplus(空格)/nolog 回车接着在弹出框里面敲:conn sys/pas ...

  10. 科学计算库（BLAS，LAPACK，MKL，EIGEN）

    函数库接口标准:BLAS (Basic Linear Algebra Subprograms)和LAPACK (Linear Algebra PACKage) 1979年,Netlib首先用Fortr ...