获取鼠标和元素的坐标点

HTML:

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

<div id="fixed_box"></div>

1,jquery 获取鼠标坐标点

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

时间: 2024-11-09 04:53:59

获取鼠标和元素的坐标点的相关文章

jquery 获取鼠标和元素的坐标点

获取当前鼠标相对img元素的坐标 $('div').mousemove(function(e) { varpositionX=e.pageX-$(this).offset().left; //获取当前鼠标相对div的X坐标 varpositionY=e.pageY-$(this).offset().top; //获取当前鼠标相对div的Y坐标 console.log(positionX+' '+positionY); }) 获取当前鼠标相对浏览器的原点的坐标 $('div').mousemove

Js获取适时获取鼠标坐标值并显示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

[WPF]获取鼠标指针下的元素

原文:[WPF]获取鼠标指针下的元素   [WPF]获取鼠标指针下的元素 周银辉 以前写过一些GetElementUnderMouse之类的函数,要用到坐标换算而显得有些麻烦(特别是当元素有XXXTransform的时候) 今天看到Mouse类居然有一个DirectlyOver属性,可以获得鼠标下的元素, 很奇怪,我的MSDN文档以及VS2008智能提示中都没有显示该属性,但反编译一下可以看到. 但必须注意到的一点是,WPF控件是由各个元素复合而成的,但Mouse类可不知道这概念,所以不要期望它

jquery获取元素坐标获取鼠标坐标

获取页面某一元素的绝对X,Y坐标,可以用offset()方法: var X = $('#DivID').offset().top; var Y = $('#DivID').offset().left; 获取相对(父元素)位置: var X = $('#DivID').position().top; var Y = $('#DivID').position().left; 让Div随滚动条移动: <div id="oLayer" style="position: abso

MFC中如何在TreeCtrl控件中获取鼠标左键消息时的有效点击位置

MFC中,当在TreeCtrl控件中添加鼠标左键消息时,就意味着,凡是在该控件中点击左键后即会响应鼠标左键的消息,可有时我们只想记下有效的鼠标左键点击的事件,如图所示: 只想在CheckBox中点击鼠标左键时,将已选中的Item的句柄存入到链表中,那么如何只将有效的鼠标左键的消息存入链表中呢? 下面是响应鼠标左键消息时从所有鼠标左键消息都响应到只响应有效的左键消息的三个版本: 当响应鼠标左键的消息时,第一个版本: 获取鼠标的点击位置(注意:此时获取的是针对于当前屏幕的鼠标点击位置,所以需要将其转

JavaScript获取鼠标点击坐标

如何用JavaScript获取鼠标点击时在canvas画布上的坐标呢: 代码如下: -------------------------------------------------------------- 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>demo</title> 6

获取鼠标坐标并且根据鼠标位置不同弹出不同内容

获取鼠标坐标,并且根据鼠标所在div弹出不同内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <head

html5中canvas的使用 获取鼠标点击页面上某点的RGB

1.html5中的canvas在IE9中可以跑起来.在IE8则跑不起来,这时候就需要一些东西了. 我推荐这种方法,这样显得代码不乱. <!--[if lt IE9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> 需要谷歌的一个html5.js的文件即可. 注意:必须插入在<head></he

获取鼠标坐标的动画

获取鼠标的坐标有e.pagX和e.pagY,这是获取他们的x,和y轴的值,在火狐和其他浏览器中都是用e来获取参数的,但IE8中是用window.event来获取参数的,它不支持e.pagX和e.pagY,在IE8中的pageX = clientX + 页面滚动出去的距离,这里就有个兼容问题,其实兼容问题,只要大概了解就行,会基本知道它封装的函数是什么原理,最主要还要会具体用在实例中. 那具体怎么用呢?一般在页面中有些窗口我们鼠标点上去可以拖着自由运动,还有滚动条啊,还有图片放大部分区域,都会用到