美文网首页
获取鼠标在盒子中的位置

获取鼠标在盒子中的位置

作者: 王远清orz | 来源:发表于2019-11-16 11:40 被阅读0次
    <style>
        * {
          margin: 0;
          padding: 0;
        }
        #box{
          margin: 100px 0 0 100px;
          width: 200px;
          height: 200px;
          border: 1px solid #ccc;
        }
      </style>
    
    <body>
      <div id="box"></div>
      <script>
        var box = document.getElementById('box');
        box.onclick = function (e) {
          e = e || window.event;
          // 鼠标在盒子中的坐标 = 鼠标在页面中的位置 - 盒子的页面的位置
          var x = getPage(e).pageX - this.offsetLeft;
          var y = getPage(e).pageY - this.offsetTop;
          console.log(x,y);
        }
      </script>
    

    相关文章

      网友评论

          本文标题:获取鼠标在盒子中的位置

          本文链接:https://www.haomeiwen.com/subject/jfxyictx.html