使用jQuery如何获取目标元素上的点击坐标
Posted
技术标签:
【中文标题】使用jQuery如何获取目标元素上的点击坐标【英文标题】:Using jQuery how to get click coordinates on the target element 【发布时间】:2011-03-15 04:19:51 【问题描述】:我的 html 元素有以下事件处理程序
jQuery("#seek-bar").click(function(e)
var x = e.pageX - e.target.offsetLeft;
alert(x);
);
点击时我需要在#seek-bar 上找到鼠标的位置。我原以为上面的代码应该可以工作,但它给出的结果不正确
【问题讨论】:
相对于元素、视口还是整个文档的位置? 我使用 e.layerX - e.target.offsetLeft 让它工作,而 Oprea 只使用了 e.offsetX 如果您希望在响应式网站上获取它。试试这篇文章,你也可以在响应式网站上得到它。 kvcodes.com/2014/03/… e.offsetX 似乎也适用于 Firefox 和 Chrome。根据jQuery page,它被复制但未规范化。 【参考方案1】:看这里enter link description here
html
<body>
<p>This is a paragraph.</p>
<div id="myPosition">
</div>
</body>
css
#myPosition
background-color:red;
height:200px;
width:200px;
jquery
$(document).ready(function()
$("#myPosition").click(function(e)
var elm = $(this);
var xPos = e.pageX - elm.offset().left;
var yPos = e.pageY - elm.offset().top;
alert("X position: " + xPos + ", Y position: " + yPos);
);
);
【讨论】:
【参考方案2】:如果你的浏览器MouseEvent.offsetX是supported(所有主流浏览器实际上都支持它),jQuery的Event object将包含这个属性。
MouseEvent.offsetX 只读属性提供鼠标指针 X 坐标中该事件与目标节点的填充边缘之间的偏移量。
$("#seek-bar").click(function(event)
var x = event.offsetX
alert(x);
);
【讨论】:
【参考方案3】:百分比:
$('.your-class').click(function (e)
var $this = $(this); // or use $(e.target) in some cases;
var offset = $this.offset();
var width = $this.width();
var height = $this.height();
var posX = offset.left;
var posY = offset.top;
var x = e.pageX-posX;
x = parseInt(x/width*100,10);
x = x<0?0:x;
x = x>100?100:x;
var y = e.pageY-posY;
y = parseInt(y/height*100,10);
y = y<0?0:y;
y = y>100?100:y;
console.log(x+'% '+y+'%');
);
【讨论】:
【参考方案4】:$('#something').click(function (e)
var elm = $(this);
var xPos = e.pageX - elm.offset().left;
var yPos = e.pageY - elm.offset().top;
console.log(xPos, yPos);
);
【讨论】:
【参考方案5】:您是否试图将鼠标指针relative
的位置简单地获取到元素(或)鼠标指针位置
试试这个演示:http://jsfiddle.net/AMsK9/
编辑:
1) event.pageX
, event.pageY
给你鼠标位置相对文档!
参考:http://api.jquery.com/event.pageX/http://api.jquery.com/event.pageY/
2) offset()
: 给出元素的偏移位置
参考:http://api.jquery.com/offset/
3) position()
:它为您提供元素的相对位置,即,
考虑一个元素嵌入到另一个元素中
示例:
<div id="imParent">
<div id="imchild" />
</div>
参考:http://api.jquery.com/position/
HTML
<body>
<div id="A" style="left:100px;"> Default <br /> mouse<br/>position </div>
<div id="B" style="left:300px;"> offset() <br /> mouse<br/>position </div>
<div id="C" style="left:500px;"> position() <br /> mouse<br/>position </div>
</body>
$(document).ready(function (e)
$('#A').click(function (e) //Default mouse Position
alert(e.pageX + ' , ' + e.pageY);
);
$('#B').click(function (e) //Offset mouse Position
var posX = $(this).offset().left,
posY = $(this).offset().top;
alert((e.pageX - posX) + ' , ' + (e.pageY - posY));
);
$('#C').click(function (e) //Relative ( to its parent) mouse position
var posX = $(this).position().left,
posY = $(this).position().top;
alert((e.pageX - posX) + ' , ' + (e.pageY - posY));
);
);
【讨论】:
+1 示例...虽然我还会在此处添加代码,但如果您的链接死了,这个问题将来会变得无用,我会为每个和一个这里有简要说明:)'#B'
的情况有一个更简单的方法:e.offsetX
和e.offsetY
。我猜你想编辑它。我已经更新了小提琴here。多亏了这篇文章,我找到了这个解决方案,所以谢谢。
谢谢,因为我个人混淆了 offset() 和 position(),任何需要进一步说明的人可以阅读***.com/questions/3202008/… 方便起见
我有一个元素固定在底部 - 那是 100% 的宽度,所以我使用窗口宽度作为 posX - 所以我能够确定用户是否点击了一个“X”使用 :after 位于右上角的 css 规则。
很好的例子,但是 .position() 和 .offset() 之间的区别并不明显。您应该将元素#C 包装在一些具有示例性位置的父 div 中,以查看单击 #C 会返回您在 #C 的父元素内的鼠标位置,这可能是最不常用的。【参考方案6】:
试试这个:
jQuery(document).ready(function()
$("#special").click(function(e)
$('#status2').html(e.pageX +', '+ e.pageY);
);
)
在这里您可以找到更多 info 的 DEMO
【讨论】:
以上是关于使用jQuery如何获取目标元素上的点击坐标的主要内容,如果未能解决你的问题,请参考以下文章
jQuery如何获取transform缩放后的宽高坐标位置?