获取鼠标早盒子中的 位置

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body {
      margin: 0;
    }

    #box {
      width: 300px;
      height: 300px;
      border: 1px solid red;
      margin: 100px 10px 10px 100px;
    }
  </style>
</head>
<body>
  <div id="box">

  </div>
  <script src="common.js"></script>
  <script>
    var box = document.getElementById(‘box‘);
    box.onclick = function (e) {
      // 获取盒子在页面上的位置
      // console.log(this.offsetLeft);
      // console.log(this.offsetTop);

      e = e || window.event;
      // 获取鼠标在盒子中的位置 = 鼠标的坐标 - 盒子的坐标
      // var x = e.pageX
      var x = getPage(e).pageX - this.offsetLeft;
      var y = getPage(e).pageY - this.offsetTop;
      console.log(x);
      console.log(y);

    }
  </script>
</body>
</html>

原文地址：https://www.cnblogs.com/jiumen/p/11416633.html

时间： 2024-11-02 23:32:08

获取鼠标早盒子中的 位置的相关文章

初学js---获取鼠标在页面中的位置

图片跟着鼠标移动: 1.获取鼠标在页面中的位置:(pageX/pageY获取鼠标在页面中的位置) 2.通过id或者其他方法找到图片,然后让图片的位置变为和鼠标位置相同,注意要先让图片脱离文档,即设置position:absolute. 完整代码: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>获取鼠标的位置</t

鼠标参数，获取鼠标在网页中的坐标

1. 事件对象 event 标准浏览器 传递给响应函数 IE 把 event 事件对象作为全局对象 window 的一个属性 2. 浏览器滚动条高度 标准浏览器 使用 documen.documentElement.scrollLeft    documen.documentElement.scrollTop Safari 等浏览器 使用 window.pageXOffset    window.pageYOffset 没有 doctype 声明的页面 document.body.scrollL

关于js获取元素在屏幕中的位置的方法

针对我们获取元素在页面中的位置的问题,我们还是用老师一峰老师的方法来解决吧 下面上HTML代码 <div class="left_footer"> <p data-num="1" ref="data" @mouseenter="mOver($event)" @mouseleave="mOut($event)">上</p> <p data-num="2&qu

0187 案例：获取鼠标在盒子内的坐标

我们在盒子内点击,想要得到鼠标距离盒子左右的距离. 首先得到鼠标在页面中的坐标(e.pageX, e.pageY) 其次得到盒子在页面中的距离 ( box.offsetLeft, box.offsetTop) 用鼠标距离页面的坐标减去盒子在页面中的距离,得到 鼠标在盒子内的坐标 如果想要移动一下鼠标,就要获取最新的坐标,使用鼠标移动 var box = document.querySelector('.box'); box.addEventListener('mousemove', functi

获取鼠标在网页上的位置以及右击事件

js写法 document.getElementById("youji").oncontextmenu=youjiEvent;//指定这个元素 给他绑定右击事件 function youjiEvent(){//鼠标右击时显示菜单 alert(item.name); return false;//屏蔽网页本身的右击效果 } jquery写法 $(function(){ $('#youji').mousedown(function(e){ if(e.which==1){ alert(&qu

android 获取view在屏幕中的位置

使用view中的getLocationOnScreen方法,即可: [java] view plaincopy final int[] locations = new int[2]; Button btn = (Button) findViewById(R.id.btn);<span style="font-family: Arial, Helvetica, sans-serif;">     </span> [java] view plaincopy btn.

获取鼠标在窗体上的位置

实现效果: 知识运用: MouseEventArgs类的X属性Y属性 //该类用来为MouseUp MouseDown 和 MouseMove事件提供数据 实现代码: private void Form1_MouseMove(object sender, MouseEventArgs e) { textBox1.Text = e.X.ToString(); textBox2.Text = e.Y.ToString(); } 原文地址:https://www.cnblogs.com/feiyuch

BaseTool中鼠标双击事件获取鼠标位置的方法

ArcGISEngine的BaseTool类中提供了鼠标双击.鼠标移动.鼠标按键按下.鼠标按键弹起四种鼠标事件,但是鼠标双击事件的参数跟其他三种不一样,双击事件中没有提供鼠标位置信息. public virtual void OnDblClick(); public virtual void OnMouseDown(int Button, int Shift, int X, int Y); public virtual void OnMouseMove(int Button, int Shift

获取鼠标坐标的动画

获取鼠标的坐标有e.pagX和e.pagY,这是获取他们的x,和y轴的值,在火狐和其他浏览器中都是用e来获取参数的,但IE8中是用window.event来获取参数的,它不支持e.pagX和e.pagY,在IE8中的pageX = clientX + 页面滚动出去的距离,这里就有个兼容问题,其实兼容问题,只要大概了解就行,会基本知道它封装的函数是什么原理,最主要还要会具体用在实例中. 那具体怎么用呢?一般在页面中有些窗口我们鼠标点上去可以拖着自由运动,还有滚动条啊,还有图片放大部分区域,都会用到