JavaScript 获得鼠标坐标

最新推荐文章于 2023-07-04 23:05:56 发布

weixin_33770878

最新推荐文章于 2023-07-04 23:05:56 发布

阅读量93

点赞数

文章标签： javascript xhtml ViewUI

本文介绍了一个简单的网页小实验，通过JavaScript实现鼠标位置的实时显示，利用HTML和CSS搭建基本界面，展示了如何获取并展示鼠标在页面上的坐标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>
    <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <base href="www.baidu.com" target="_blank" />
        <script type="text/javascript">
    function mousePosition(ev){
     if(ev.pageX || ev.pageY){
      return {x:ev.pageX, y:ev.pageY};
     }
     return {
      x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
      y:ev.clientY + document.body.scrollTop - document.body.clientTop};
     }
    function mouseMove(ev){
     ev = ev || window.event;
     var mousePos = mousePosition(ev);
     document.getElementById('xxx').value = mousePos.x;
     document.getElementById('yyy').value = mousePos.y;
    }
    document.onmousemove = mouseMove;
   </script>
    </head>

<body">
    X:<input id="xxx" type="text" /> Y:<input id="yyy" type="text" />
    </body>
</html>