使用 jQuery 如何获取目标元素上的单击坐标

小开

试试这个:

jQuery(document).ready(function(){
$("#special").click(function(e){
$('#status2').html(e.pageX +', '+ e.pageY);
});
})

在这里你可以找到更多的 < strong > info 与 DEMO

小开

最佳答案

您是否试图获取鼠标指针 relative到元素的位置(或者)只是鼠标指针的位置

试试这个演示: < a href = “ http://jsfiddle.net/AMsK9/”rel = “ norefrer”> < strong > http://jsfiddle.net/amsk9/

编辑:

1) event.pageX，event.pageY给你鼠标位置的相关文档！

参考文献 : < a href = “ http://api.jquery.com/event.pageX/”rel = “ norefrer”> http://api.jquery.com/event.pagex/
Http://api.jquery.com/event.pagey/

2) offset(): 它给出一个元素的偏移位置

Ref : < a href = “ http://api.jquery.com/offet/”rel = “ norefrer”> http://api.jquery.com/offset/

3) position() : It gives you the relative Position of an element i.e.,

考虑一个元素嵌入到另一个元素中

example :

<div id="imParent">
<div id="imchild" />
</div>

参考文献 : < a href = “ http://api.jquery.com/position/”rel = “ norefrer”> http://api.jquery.com/position/

超文本标示语言

<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>

JavaScript

$(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));
});
});

小开

$('#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);
});

小开

百分比:

$('.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+'%');
});

小开

如果浏览器中的 MouseEvent.offsetX是支持(所有主流浏览器实际上都支持它) ，则 jQuery事件对象将包含此属性。

The MouseEvent.offsetX read-only property provides the offset in the X coordinate of the mouse pointer between that event and the padding edge of the target node.

$("#seek-bar").click(function(event) {
var x = event.offsetX
alert(x);
});

小开

看这里在这里输入链接描述

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);
});
});