代码如下：

<!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. 15条MySQL改善经验让系统更稳定

    MySQL 作为目前的主流开源数据库, 既能挑战 “双11”,又能扛起 “618”,比起网红版数据库,MySQL 绝对是实力担当. 1. 为查询缓存优化查询 像 NOW() 和 RAND() 或是其它 ...

  2. DCL和DQL

    数据查询语言(DQL,Data Query Language) 主要是一些查询的sql语句. 语法 select * from test: 数据控制语言(DCL, Data Control Langu ...

  3. 为什么需要NAT，目前家庭的计算机器如何上网？（原创）

    .什么是NAT?     字面翻译网络地址转换. 2.产生的背景    解决公网IP不足的问题.    官方规定,将IP地址资源进行分类,分为ABCDE,常用ABC三类,在每类中划分出了一些私有IP供 ...

  4. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 网格系统实例：列排序

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. 敏感、脆弱,OLED柔性屏会带给制造业怎样的灾难？

    智能手机市场已经有些意兴阑珊,大家创新的点子在过去十年逐一亮剑,也带来了一些革命,现在谈到智能手机硬件,只能是更大的屏幕.更大的电池,更高的摄像头像素等等,长期的创新乏力,已经让消费者失去" ...

  6. JAVA项目开发之文档篇

    转自链接:https://blog.csdn.net/Zonzereal/article/details/76704455

  7. webpack的配置文件[webpack.config.js]

    如果项目里没有webpack.config.js这个文件,webpack会使用它本身内置在源码里的配置项. webpack.config.js这个配置名称可以通过指令修改 npx webpack -- ...

  8. 「AHOI2008」紧急集合/聚会

    题目描述 这次也是很长的题面啊\(qwq\) 题目大意如下: 给定一棵\(N\)个节点的树以及\(M\)次询问,每次询问给出\(x,\ y,\ z\)三个节点,程序需要在树上找一个点\(p\) 使得\ ...

  9. Python 之并发编程之进程上(基本概念、并行并发、cpu调度、阻塞 )

    一: 进程的概念:(Process) 进程就是正在运行的程序,它是操作系统中,资源分配的最小单位. 资源分配:分配的是cpu和内存等物理资源 进程号是进程的唯一标识 同一个程序执行两次之后是两个进程 ...

  10. Altium Designer中，将多个工程下的原理图和PCB合并在一起

    TDD双向放大器的设计分为三部分:LNA部分.PA部分和控制开关部分.为了调试方便,已经在三个Altium工程里面分别设计了三部分.现在需要合并成一个板子,为了保留已有的布局布线的工作量,采用这个办法 ...