获得本页内鼠标的坐标值

最新推荐文章于 2025-04-16 16:00:07 发布
最新推荐文章于 2025-04-16 16:00:07 发布
阅读量434 收藏
点赞数
分类专栏： js开发 文章标签： function javascript input table html java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/scler/article/details/2499563
版权
  1. <%@ page language="java" pageEncoding="utf-8"%>   
  2.   
  3. <html>   
  4. <head>   
  5. </head>   
  6. <script language="javascript">   
  7. function mouseMove(ev){   
  8.          ev = ev || window.event;   
  9.         var mousePos = mouseCoords(ev);   
  10.                  document.getElementById('xxx').value = mousePos.x;   
  11.                  document.getElementById('yyy').value = mousePos.y;   
  12. }   
  13.   
  14. function mouseCoords(ev){   
  15.         if(ev.pageX || ev.pageY){   
  16.                 return {x:ev.pageX, y:ev.pageY};   
  17.          }   
  18.         return {   
  19.                  x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,   
  20.                  y:ev.clientY + document.body.scrollTop   - document.body.clientTop   
  21.          };   
  22. }   
  23.   
  24. document.onmousemove = mouseMove;   
  25. </script>   
  26. <body>   
  27. <FIELDSET id="testone" style="width:200px">   
  28. <table>   
  29.          <tr>   
  30.                  <td colspan="2" align="center">   
  31.                          <font size="2" color="green"><b>获得本页光标的位置</b></font>   
  32.                  </td>   
  33.          </tr>   
  34.          <tr>   
  35.                  <td>   
  36.                          <font size="2" color="green"><b>Mouse X Position:</b></font>   
  37.                  </td>   
  38.                  <td>   
  39.                          <input id="xxx" type="text" size="5">   
  40.                  </td>   
  41.          </tr>   
  42.          <tr>   
  43.                  <td>   
  44.                          <font size="2" color="green"><b>Mouse Y Position:</b></font>   
  45.                  </td>   
  46.                  <td>   
  47.                          <input id="yyy" type="text" size="5">   
  48.                  </td>   
  49.          </tr>   
  50. </table>   
  51. </FIELDSET>   
  52. </body>   
  53. </html>  
javascript获得鼠标的坐标值
10-03
这里，我们首先通过`getBoundingClientRect()`获取目标元素的大小和位置，然后从鼠标坐标中减去元素的位置，得到相对于元素的坐标。 ### 补充知识点 - `event`对象：在JavaScript事件处理函数中，浏览器自动传递的...
javaScript中获取鼠标位置
12-15 191
function mousePosition(ev){ if(ev.pageX || ev.pageY){ return {x:ev.pageX, y:ev.pageY}; } return { x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
获取鼠标的坐标
weixin_30532837的博客
12-09 106
用js获取鼠标的坐标值，会遇到兼容性的问题，可以用以下方法获取鼠标坐标值： 　　 function mousePosition(ev){ 　　if(ev.pageX || ev.pageY){　　 return {x:ev.pageX, y:ev.pageY};　　 }　　 return {　　 x:ev.cli...
鼠标坐标值cvPutText ROI区域　ROI的面积
03-19
鼠标在图片上移动可以在图片的某一个位置显示鼠标的坐标值，在此基础上可以用cvPolyLine函数设置我们感兴趣的ROI，并填充相应的颜色，用cvFindContours（）和cvContourArea（）函数获得ＲＯＩ的面积。
js获得鼠标的坐标值的方法
10-27
以下将详细介绍如何在不同场景下获取鼠标的坐标值。 1. **相对于body的坐标值** 当你需要获取鼠标相对于整个页面body的位置时，可以使用`event.clientX`和`event.clientY`属性。这两个属性提供了鼠标在X轴和Y轴上...
qcustomplot鼠标点击后在坐标轴显示值
06-08
4. **显示坐标值**：转换得到的坐标值可以显示在状态栏、弹出框或者自定义的标签上。如果你希望在坐标轴附近直接显示，可以创建自定义的小型文本项（如QLabel），并将其位置定位在鼠标位置附近，显示相应的坐标值。 ...
python调用百度地图WEB服务API获取地点对应坐标值
09-19
【Python调用百度地图WEB服务API获取地点对应坐标值】是指使用Python编程语言，通过调用百度地图提供的Web服务API接口来实现从结构化的地址数据中获取对应的经纬度坐标。这个过程涉及到网络请求、JSON解析以及文件...
JS获取鼠标坐标
我的博客
09-10 136
获取鼠标坐标 function mousePosition(ev){ if(ev.pageX || ev.pageY){ return {x:ev.pageX, y:ev.pageY}; } return { x:ev.clientX + document.body.scroll...
获得鼠标在网页上的位置(x,y轴坐标)
大爱无疆
05-16 2207
 获得鼠标在网页上的位置(x,y轴坐标) function mouseCoords(ev) {     if(ev.pageX || ev.pageY)    {       return {x:ev.pageX, y:ev.pageY};     }    return {        x:ev.clientX + document.body.scrollLeft - document.bod
JS中找到鼠标点击的坐标
左直拳的马桶_日用桶
11-03 3626
JS中找到鼠标点击的坐标左直拳如果想获取页面中鼠标点击的坐标，可以用event.clientX和event.clientY。问题是要注意这个event。它代表当前事件本身。所以，一定要是在事件触发的函数中，才可能访问到这个event，否则为空，event.clientX什么的也就成了镜花水月。例如，有函数GetMouseXY(){      alert(event.cl
JavaScript 获取鼠标坐标的方法
录事参军
09-16 1812
function mouseMove(ev)  {  ev= ev || window.event;  var mousePos = mouseCoords(ev);  //alert(ev.pageX);  document.getElementById("xPos").value = mousePos.x;  document.getElementById("yPos").valu
Vue3生命周期钩子详解
BillKu的博客
04-15 445
Vue 3 生命周期通过 Composition API 提供了更灵活的代码组织方式。理解各钩子的触发时机和用途，能帮助开发者高效处理初始化、副作用清理和性能优化。Vue 3 的生命周期钩子函数允许开发者在组件不同阶段执行特定逻辑。与 Vue 2 相比，Vue 3 在 Composition API 中引入了新名称，并废弃了部分钩子。：操作 DOM、发起异步请求、初始化第三方库。：避免在此钩子中修改状态，可能导致无限循环。：可在自定义函数内调用钩子，逻辑更内聚。最先执行，用于定义响应式数据、方法等。
记录一次后台项目的打包优化
最新发布
weixin_44846945的博客
04-16 580
优化，所有开发者到一定的程度上，都绕不开的问题之一首页加载优化白屏优化列表无限加载滚动优化，图片加载优化逻辑耦合，复杂度优化，如何降低复杂度打包优化以上这些，只是简单举例，类似的优化其实还有很多，诸如此类的优化，如果细细拆分开来，其实感觉不会带来多大效果，但是组合起来，还是能让人大吃一惊以下是我分享一次打包优化的过程。
基于Springboot框架实现的crm客户关系管理系统（源码+数据库）
shaoweijava的博客
04-16 264
基于Springboot框架实现的crm客户关系管理系统，包有一种角色：管理员
微信小程序 binding
u010669626的博客
04-16 452
warning: For developer:Two-way binding does not support complex data paths currently. This two-way binding is ignored.---- > result is correct with the waring, to remove the warning:the difference between value and model:value in WeChat Mini Programs.1. v
Vue 3 中 ref和reactive的详细使用场景
学习记录
04-16 172
在处理复杂对象结构时更直观。根据具体需求灵活选择，可显著提升代码可维护性。• 对数组进行索引操作时，建议使用变更方法（更适合管理独立值和需要完全替换的场景，而。• 需要灵活替换 →。
python如何在深度图上用鼠标点击某一位置得到对应的坐标值
04-26
# 创建鼠标事件回调函数 def mouse_callback(event, x, y, flags, param): if event == cv2.EVENT_LBUTTONDOWN: # 获取点击处的深度值 depth = depth_image[y][x] print(f"深度值为: {depth}，坐标为: ({x},{y})...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值