cari

Rumah >hujung hadapan web >tutorial js >Bagaimana untuk mendapatkan dan memaparkan koordinat tetikus dalam masa nyata menggunakan javascript

Bagaimana untuk mendapatkan dan memaparkan koordinat tetikus dalam masa nyata menggunakan javascript

PHPz
PHPzasal
2016-05-16 16:01:331737semak imbas

Artikel ini terutamanya memperkenalkan kaedah mendapatkan dan memaparkan koordinat tetikus dalam masa nyata menggunakan javascript. Ia melibatkan teknik yang berkaitan dengan acara tetikus pengendalian javascript. Rakan yang memerlukan boleh merujuknya >

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

[Cadangan tutorial berkaitan]

1

Tutorial video JavaScript

2 Manual dalam talian JavaScript
3. tutorial bootstrap

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：AOP (pengaturcaraan berorientasikan aspek) dan OOP (pengaturcaraan berorientasikan objek) yui3_YUI.Ext berkaitanArtikel seterusnya：AOP (pengaturcaraan berorientasikan aspek) dan OOP (pengaturcaraan berorientasikan objek) yui3_YUI.Ext berkaitan

Artikel berkaitan

Lihat lagi