代码如下：

<!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. windows下 DEV-C++无法连接到pthread.h的解决办法

    参考的这个博文,原博文有图片:http://lslin.iteye.com/blog/776325 (我只是为了方便写.copy一遍) dev-C++编写C/C++程序时,非常方便轻巧,但是今天学习多 ...

  2. vue-cli 手脚架mock虚拟数据的运用，特别是坑！！！

    1.现在基本的趋势就是前后分离,前后分离就意味着当后台接口还没完成之前,前端是没有接口可以拿来调用的 ,那么mock虚拟数据就很好的解决了这一问题,前端可以直接模拟真实的数据AJAX请求! 运用 步骤 ...

  3. 「Luogu P3680 凸轮廓线」

    一道神奇的计算几何题 前置芝士 正三角形,正方形,圆:什么,您都会,那真是太好了. 三角函数的运用:因为我不是很想在这一块写太多,具体可以自行百度. 推导公式 对于一串是圆和正方形开头和结尾时是十分好 ...

  4. LCS（最长公共子序列）

    这个问题很有意思,在生物应用中,经常需要比较两个(或多个)不同生物体的DNA片段.例如,某种生物的DNA可能为S1 = ACCGGTCGAGTGCGCGGAAGCCGGCCGAA,S2 = GTCGT ...

  5. 简析ThreadLocal原理及应用

    简析ThreadLocal原理及应用 原创: 东晨雨 JAVA万维猿圈 4月17日 ThreadLocal的源码加上注释不超过八百行,源码结构清晰,代码也比较简洁.ThreadLocal可以说是Jav ...

  6. nodejs的C++扩展中实现异步回调

    在nodejs的官方网站中有关于C++扩展的详细说明,其中包含了从"hello world"到对象封装的一系列示例.其中的“callback”节是关于回调函数的,美中不足的是,这个 ...

  7. Flask - 多APP应用（不太重要）

    1. 多APP应用 请求进来时,可以根据URL的不同,交给不同的APP处理.一般用蓝图也可以实现.一般不写多app应用. from werkzeug.wsgi import DispatcherMid ...

  8. 阿里云CentOS安装图形化界面

    阿里云提供的linux系统是不含图形化界面的,如果您需要安装图形化界面, 请您参考为Linux实例安装图形化桌面环境和在CentOS系统中自动安装并运行VNC Server安装部署一下. 为Linux ...

  9. QQ企业通--客户端登陆模块设计---知识点2

    Maximizable 属性               获取一个值,该值指定窗口是否可以最大化. fromBorderstyle 成员名称    说明 None            无边框. Fi ...

  10. layer弹出框包含页面

    参考:http://www.cnblogs.com/zhengchenhui/p/6038865.html