search

Home  >  Article  >  Web Front-end  >  How to obtain and display mouse coordinates in real time using javascript

How to obtain and display mouse coordinates in real time using javascript

PHPz
PHPzOriginal
2016-05-16 16:01:331704browse

This article mainly introduces the method of obtaining and displaying mouse coordinates in real time using javascript. It involves techniques related to javascript operating mouse events. It is of great practical value. Friends in need can refer to it 

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

[Related tutorial recommendations]

1. JavaScript video tutorial
2. JavaScript online manual
3. bootstrap tutorial

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：AOP (aspect-oriented programming) and OOP (object-oriented programming) of yui3_YUI.Ext relatedNext article：AOP (aspect-oriented programming) and OOP (object-oriented programming) of yui3_YUI.Ext related

Related articles

See more