博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
获取鼠标和元素的坐标点
阅读量:6392 次
发布时间:2019-06-23

本文共 995 字,大约阅读时间需要 3 分钟。

HTML:

 

<div id="main">获取坐标</div>
<div id="fixed_box"></div>

 

1,

a ,获取当前鼠标相对html页面的原点的坐标  
$("#main").click(function(e) {
  var pageX = e.pageX;
  var pageY = e.pageY;
  console.log(pageX, pageY)
})
 
b ,获取当前鼠标相对img元素的坐标
$("#main").click(function(e) {
        var positionX = e.pageX - $(this).offset().left; //获取当前鼠标相对img的X坐标
        var positionY = e.pageY - $(this).offset().top; //获取当前鼠标相对img的Y坐标
   console.log(positionX + ' ' + positionY);
})
 
c,  获取当前鼠标相对浏览器的原点的坐标
$("#main").click(function(e) {
  var xx = e.originalEvent.x || e.originalEvent.layerX || 0;
  var yy = e.originalEvent.y || e.originalEvent.layerY || 0;
  console.log(xx + ' ' + yy);
})
 
 
2,javascript 获取元素的坐标
omain.onclick = function(e) {
  var eve = e || window.event;
  var x = eve.clientX, // 鼠标指针相对客户端(即浏览器文档区域)的水平坐标。
  y = eve.clientY, // 鼠标指针相对客户端(即浏览器文档区域)的垂直坐标。
  x1 = eve.screenX, // 鼠标指针相对计算机屏幕的水平坐标。
  y1 = eve.screenY; // 鼠标指针相对计算机屏幕的垂直坐标。
  console.log(x, y);
  console.log(x1, y1);
}
 

转载于:https://www.cnblogs.com/ermaoblog/p/8250586.html

你可能感兴趣的文章
几种常见模式识别算法整理和总结
查看>>
在_Layout模版中使用@Styles.Render()没有效果
查看>>
他叫索隆
查看>>
使用checkstyle来规范你的项目
查看>>
wireshark 实用过滤表达式(针对ip、协议、端口、长度和内容) 实例介绍(转)...
查看>>
Loadrunner中影响"响应时间"的设置
查看>>
进入css3动画世界(二)
查看>>
2017 部门文化宣贯会议内容
查看>>
南方的养老金拿去支援东北,解燃眉之急!这位专家的建议,让网友议论开了...
查看>>
微服务网关哪家强?一文看懂Zuul, Nginx, Spring Cloud, Linkerd性能差异
查看>>
花7年时间发布一款测试版游戏是种什么体验?
查看>>
携程晋升6位副总裁 多为加盟10年以上骨干员工
查看>>
K歌之王的秘密 全藏在那部手机“芯”里
查看>>
通讯:白先勇的“八千里路云和月”
查看>>
湖北恩施:警方租赁警犬街头巡逻震慑违法犯罪
查看>>
拥抱“全球朋友圈” 2018年宁波外贸进出口额达8576.3亿元
查看>>
我按装了头条啊,这是什么意思啊,求大神科普
查看>>
类的继承
查看>>
Bugku-代码审计(数字验证正则绕过)
查看>>
图解 wp WordPress 文章 链接 在新窗口打开
查看>>