Heim > Artikel > Web-Frontend > So erhalten und zeigen Sie Mauskoordinaten in Echtzeit mithilfe von Javascript an

So erhalten und zeigen Sie Mauskoordinaten in Echtzeit mithilfe von Javascript an

PHPzOriginal: 2016-05-16 16:01:331653Durchsuche

Dieser Artikel stellt hauptsächlich die Methode zum Abrufen und Anzeigen von Mauskoordinaten in Echtzeit vor. Es handelt sich um Techniken im Zusammenhang mit der Bedienung von Mausereignissen durch Javascript. Es ist von großem praktischem Wert >

<!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>

[Verwandte Tutorial-Empfehlungen]

JavaScript-Video-Tutorial

2. JavaScript-Online-Handbuch
3. Bootstrap-Tutorial

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：AOP (aspektorientierte Programmierung) und OOP (objektorientierte Programmierung) von yui3_YUI.Ext verwandtNächster Artikel：AOP (aspektorientierte Programmierung) und OOP (objektorientierte Programmierung) von yui3_YUI.Ext verwandt

In Verbindung stehende Artikel

Mehr sehen