Блог

Главная - Вопросы по программированию - javascript в координатах указателя мыши

javascript в координатах указателя мыши

#javascript #coords

#javascript #координаты

Вопрос:

Я хотел бы отображать координаты x, y с сайта на моем курсоре по мере его перемещения..

Я использую приведенный ниже скрипт, но он генерирует окно предупреждения.

 <script type=text/javascript>
var isIE = document.all?true:false;
if (!isIE) document.captureEvents(Event.CLICK);

document.onclick = getMousePosition;
function getMousePosition(e) {
  var _x;
  var _y;
  if (!isIE) {
    _x = e.pageX;
    _y = e.pageY;
  }
  if (isIE) {
    _x = event.clientX   document.body.scrollLeft;
    _y = event.clientY   document.body.scrollTop;
  }
  posX = _x;
  posY = _y;

  return true;
}
</script>

<body onclick=alert("X-position:amp;nbsp;" posX ";amp;nbsp;Y-position:amp;nbsp;" posY ".")>

Комментарии:

1. Вместо alert , который отображает модальное всплывающее окно, вы должны использовать mousemove событие и html функцию jQuery, как в приведенном ниже ответе. Я заметил, что вы не пометили jQuery, но почему бы не использовать его? Это значительно упрощает динамические события, подобные этому.

Ответ №1:

Я думаю, что это более простой вариант..

 <html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
   $(document).mousemove(function(e){
      $('#status').html(e.pageX  ', '  e.pageY);
   }); 
})
</script>
<body>
<h2 id="status">
0, 0
</h2>
</body>
</html>

http://docs.jquery.com/Tutorials:Mouse_Position#Tracking_mouse_position

Комментарии:

1. Пометил ли OP этот вопрос как jQuery …?

Ответ №2:

Это должно сработать:

 // Cursor coordinate functions
var myX, myY, xyOn, myMouseX, myMouseY;
xyOn = true;

function getXYPosition(e) {
    myMouseX = (e || event).clientX;
    myMouseY = (e || event).clientY;
    if (document.documentElement.scrollTop > 0) {
        myMouseY = myMouseY   document.documentElement.scrollTop;
    }
    if (xyOn) {
        alert("X is "   myMouseX   "nY is "   myMouseY);
    }
}
function toggleXY() {
    xyOn = !xyOn;
    document.getElementById('xyLink').blur();
    return false;
}   

document.onmouseup = getXYPosition;

Вам также нужна эта скрытая гиперссылка:

 <a href="#" id="xyLink" onfocus="toggleXY();" accesskey="z"></a>

введите описание изображения здесь

Вот статья:http://www.brenz.net/snippets/xy.asp