Desenvolvimento

Teste 6 - Encontrando a Localização do Mouse

A localização do evento na tela do browser pode ser determinada. Nesta página, basta clicar em qualquer local para exibir uma mensagem com as propriedades Left e Top do ponto onde foi dado o clique.

Eis os trechos cruciais do código desta página:

<head>
   <style type='text/css'>
      #area1 {position: relative; visibility: show}
   </style>
   <script type='text/javascript'>
      function findXCoord(evt) {
         if (evt.x) { return evt.x }
         if (evt.pageX) { return evt.pageX }
      }
      function findYCoord(evt) {
         if (evt.y) { return evt.y }
         if (evt.pageY) { return evt.pageY }
      }
   </script>
</head>

<body onClick="alert('Left = ' + findXCoord(event) + 'px; Top = ' + findYCoord(event) + 'px')">
   ...
   <div id="area1" style="background-color: aqua">
      <img src="../../images/photos/pht_Lee.jpg" style="border-width: 0" />
   </div>
</body>

As funções findXCoord() e findYCoord() retornam o valor (em pixels) da localização do ponteiro do mouse quando o evento é disparado. O Internet Explorer usa os métodos x e y, enquanto o Netscape usa pageX e pageY.

O evento onClick dentro da tag <body> dispara as funções findXCoord() e findYCoord(), concatenando-os com texto para mostrar os valores de Left e Top. Utilizando o objeto event, a colocação do evento onClick na tag <body> permite localizar o ponteiro do mouse em qualquer parte da tela. A colocação do evento em outro elemento (um link <a>, por exemplo) faria a detecção do ponteiro do mouse somente dentro da área definida para este outro elemento.