2015-12-14 3 views
2

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

document.getElementById("coords").innerHTML = crdX + ", " + crdY

http://jsfiddle.net/7pj9gpvn/

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

+0

Что вы пытаетесь уже? – ashes999

ответ

1

Вам необходимо прикрепить MouseEvent, и объект события, переданный обработчику, даст вам координаты. Прикрепите его к документу, если вы хотите отслеживать движение повсюду. clientX и clientY дают локальные координаты, а screenX и screenY - глобальные координаты.

Fiddle: http://jsfiddle.net/AtheistP3ace/7pj9gpvn/4/

HTML:

<p id="coords"></p> 
<p id="coords2"></p> 

JS:

document.addEventListener('mousemove', 
    function (event) { 
     var para = document.getElementById('coords'); 
     para.textContent = event.clientX + ", " + event.clientY; 
     var para2 = document.getElementById('coords2'); 
     para2.textContent = event.screenX + ", " + event.screenY; 
    } 
); 

Feel свободно читать на нем себя тоже: https://developer.mozilla.org/en-US/docs/Web/Events/mousemove

3

Попробуйте это работает на всех браузер

http://jsfiddle.net/7hxtLqd4/

<html> 

<body> 
      <form name="mShow"> 
     <input type="text" name="MX" value="0" size="4"> X 
     <br> 
     <input type="text" name="MY" value="0" size="4"> Y 
     <br> 
    </form> 

    <script language="JavaScript1.2"> 

     var IE = document.all ? true : false 

     if (!IE) document.captureEvents(Event.MOUSEMOVE) 

     document.onmousemove = getMouse; 

     var tempX = 0 
     var tempY = 0 


     function getMouse(e) { 
      if (IE) { 
       tempX = event.clientX + document.body.scrollLeft 
       tempY = event.clientY + document.body.scrollTop 
      } else { 
       tempX = e.pageX 
       tempY = e.pageY 
      } 

      if (tempX < 0) { 
       tempX = 0 
      } 
      if (tempY < 0) { 
       tempY = 0 
      } 
      // ADD TEMP VALUE FOR FIELDS 
      document.mShow.MX.value = tempX 
      document.mShow.MY.value = tempY 
      return true 
     } 


    </script> 

</body> 

</html> 
Смежные вопросы