2010-03-25 4 views
1

это моя установкаполучить позицию мыши относительно родительского элемента

<div id="uxcParent"> 
<div id="uxcClickable"></div> 
</div> 

теперь, когда пользователь нажимает на внутреннем элементе я хочу позицию мыши относительно родительского DIV, а не страницы.

это то, что я пробовал.

var x= e.pageX- obj.offsetLeft; 
var y= e.pageY- obj.offsetTop; 

это прекрасно работает, только когда я не прокручиваю страницу. Я хочу, чтобы функция возвращала те же значения независимо от того, где мои элементы находятся на одной странице.

обновление:

я думаю, что это не было достаточно ясно. подробнее подробнее ..

Учтите, что элементы находятся в документе в позиции x относительно документа. на странице есть полоса прокрутки. теперь я могу прокручивать любую часть страницы, и позиция по-прежнему будет х. но положение относительно порта просмотра изменилось бы. поэтому pageX и pageY будут давать разные значения. это мой улов.

мои элементы могут находиться в любой точке зрения порта, и когда я иду по внутреннему элементу я должен получить координаты только в отношении родителя (не должны влиять, где родитель)

надежды я теперь ясно.

+0

Это опечатка или на самом деле в вашем коде вы ссылаетесь на координаты Y на переменную x? – markcial

+0

это была опечатка .. изменилась .. – ZX12R

ответ

0

Если прокрутка была единственной ошибкой, то я бы подумал, что добавление в scrollLeft и scrollTop исправит проблему.

2

Вы можете сделать это с помощью JQuery, как это:

<html> 
<head> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
jQuery(document).ready(function(){ 
    $("#special").click(function(e){ 
     $('#status2').html(e.pageX +', '+ e.pageY); 
    }); 
}) 
</script> 
<body> 

<h2 id="status2"> 
0, 0 
</h2> 
<div style="width: 100px; height: 100px; background:#ccc;" id="special"> 
Click me anywhere! 
</div> 
</body> 
</html> 

Обратите внимание, что значения пикселей дают относительны ко всему документу. Если вы хотите вычислить позицию в определенном элементе или в окне просмотра, вы можете посмотреть на offsetY и offsetX и сделать немного арифметики, чтобы найти относительное значение.

Ниже приведен пример нахождения позиции в конкретном элементе, а не на странице:

$("#special").click(function(e){ 

    var x = e.pageX - this.offsetLeft; 
    var y = e.pageY - this.offsetTop; 

     alert(x +', '+ y); 
    }); 

Где «специальный» является идентификатором внутреннего элемента.

+0

Я видел это в документации jquery. это не моя проблема. Я обновлю свой вопрос и сделаю это более понятным .. – ZX12R

Смежные вопросы