recherche

Maison >interface Web >js tutoriel >Comment obtenir et afficher les coordonnées de la souris en temps réel en utilisant javascript

Comment obtenir et afficher les coordonnées de la souris en temps réel en utilisant javascript

PHPz
PHPzoriginal
2016-05-16 16:01:331756parcourir

Cet article présente principalement la méthode d'obtention et d'affichage des coordonnées de la souris en temps réel à l'aide de javascript. Il implique des techniques liées au fonctionnement des événements de souris en javascript. Il est d'une grande valeur pratique. Les amis dans le besoin peuvent s'y référer 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS实时获取鼠标坐标值并显示</title>
</head>
<body>
<script type="text/javascript">
 var getCoordInDocumentExample = function(){
  var coords = document.getElementById("coords");
  coords.onmousemove = function(e){
   var pointer = getCoordInDocument(e);
   var coord = document.getElementById("coord");
   coord.innerHTML = "X,Y=("+pointer.x+", "+pointer.y+")";
  }
 }
 var getCoordInDocument = function(e) {
  e = e || window.event;
  var x = e.pageX || (e.clientX +
   (document.documentElement.scrollLeft
   || document.body.scrollLeft));
  var y= e.pageY || (e.clientY +
   (document.documentElement.scrollTop
   || document.body.scrollTop));
  return {&#39;x&#39;:x,&#39;y&#39;:y};
 }
 window.onload = function(){
   getCoordInDocumentExample();
 };
</script>
<p id="coords" 
style="width:500px;height:200px;background:#F2F1D7;
border:2px solid #0066cc;">
请在此移动鼠标。
</p>
<br />
<p id="coord" 
style="width:500px;border:2px solid #336699;"> </p>
</body>
</html>

[Recommandations de didacticiel associées]

1

Tutoriel vidéo JavaScript2.
Manuel en ligne JavaScript3.
Tutoriel bootstrap

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：AOP (programmation orientée aspect) et POO (programmation orientée objet) de yui3_YUI.Ext liésArticle suivant：AOP (programmation orientée aspect) et POO (programmation orientée objet) de yui3_YUI.Ext liés

Articles Liés

Voir plus