代码如下：

<!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. AT2827 最长上升子序列LIS(nlogn的DP优化)

      题意翻译 给定一长度为n的数列,请在不改变原数列顺序的前提下,从中随机的取出一定数量的整数,并使这些整数构成单调上升序列. 输出这类单调上升序列的最大长度. 数据范围:1<=n<=10 ...

  2. Java基础 -1.4

    标识符与关键字 对于标识符的组成在Java之中的定义如下:由字母.数字._.$ 组成 其中不能使用Java的保留字(关键字) 其中 $ 一般都有特殊的含义 不建议出现在自己所编写的代码上 关键字 是系 ...

  3. 第4节 Scala中的actor介绍：1、actor概念介绍；2、actor执行顺序和发送消息的方式

    10.    Scala Actor并发编程 10.1.   课程目标 10.1.1.    目标一:熟悉Scala Actor并发编程 10.1.2.    目标二:为学习Akka做准备 注:Sca ...

  4. 「Luogu P2824 [HEOI2016/TJOI2016]排序」

    一道十分神奇的线段树题,做法十分的有趣. 前置芝士 线段树:一个十分基础的数据结构,在这道题中起了至关重要的作用. 一种基于01串的神奇的二分思想:在模拟赛中出现了这道题,可以先去做一下,这样可能有助 ...

  5. Systemverilog for design 笔记（五）

    转载请标明出处 第一章 System Verilog过程块.任务和函数 1.1.    verilog通用目的always过程块(procedural block)(可综合) always过程块的综合 ...

  6. C/C++ — CreateThread 相关 API

    使用互斥对象: #include <windows.h> #include <iostream> #define THREADCOUNT 6 HANDLE ghMutex; D ...

  7. 利用django打造自己的工作流平台(二):疫情统计系统

    相关文章: 利用django打造自己的工作流平台(一):从EXCEL到流程化运作 本文是“利用django打造自己的工作流平台”系列文章的第二篇,在自己开发的工作流平台中添加了一个用于排查统计可能受感 ...

  8. nmap 速查命令

    进行ping扫描,打印出对扫描做出响应的主机,不做进一步测试(如端口扫描或者操作系统探测) nmap -sP 192.168.1.0/24 仅列出指定网络上的每台主机,不发送任何报文到目标主机 nam ...

  9. 题解 CF165D 【Beard Graph】

    思路:将黑边标记为1,白边标记为100000,树链剖分 如果查询时ans超过100000,那就有白边,输出-1,不然直接输出ans #include<bits/stdc++.h> #def ...

  10. Lesson 8 Trading standards

    What makes trading between rich countires difficult? Chickens slautered in the United States, claim ...