Используя jQuery, как получить координаты щелчка на целевом элементе
У меня есть следующий обработчик событий для моего элемента HTML
jQuery("#seek-bar").click(function(e){
var x = e.pageX - e.target.offsetLeft;
alert(x);
});
Я должен найти положение мыши на #seek-bar во время нажатия. Я думал бы, что вышеупомянутый код должен работать, но он дает неправильный результат
2 ответа
Вы пытаетесь получить положение указателя мыши относительно элемента ( или ) просто расположение указателя мыши
Попробуйте эту демонстрацию : http://jsfiddle.net/AMsK9/
Edit :
1) event.pageX, event.pageY дает вам положение мыши относительно документа!
Ref : http://api.jquery.com/event.pageX/
http://api.jquery.com/event.pageY/
2) offset() : Выдает позицию смещения элемента
Ref : http://api.jquery.com/offset/
3) position() : Выдает относительное положение элемента, т.е.,
рассмотреть элемент как встроенный в другой элемент
пример :
<div id="imParent">
<div id="imchild" />
</div>
Ref : 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>
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));
});
});
Попробуйте следующее:
jQuery(document).ready(function(){
$("#special").click(function(e){
$('#status2').html(e.pageX +', '+ e.pageY);
});
})
Здесь вы можете найти дополнительную информацию с DEMO