首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在Javascript中获得相对于页面而不是相对于屏幕的鼠标坐标?

在Javascript中,可以通过以下方式获得相对于页面而不是相对于屏幕的鼠标坐标:

  1. 使用事件对象的pageX和pageY属性:
    • pageX:鼠标相对于整个文档页面的水平坐标。
    • pageY:鼠标相对于整个文档页面的垂直坐标。
    • pageY:鼠标相对于整个文档页面的垂直坐标。
  • 使用事件对象的clientX和clientY属性结合滚动条的位置:
    • clientX:鼠标相对于浏览器窗口可视区域的水平坐标。
    • clientY:鼠标相对于浏览器窗口可视区域的垂直坐标。
    • clientY:鼠标相对于浏览器窗口可视区域的垂直坐标。

这样可以获得相对于页面的鼠标坐标,无论页面是否有滚动条。这在需要精确获取鼠标位置的交互场景中非常有用,例如拖拽、绘图等。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

DOM 和 BOM 各种宽高属性

注意:IE 和 Opera 下表示是窗口文档区到屏幕距离,这意味着窗口最大化时,screenTop 返回是窗口顶部栏高度不是 0。...ev.clientX/ev.clientY: 事件发生时,鼠标点击位置相对于浏览器可视区(不包括滚动条和工具栏)左上角(该点为原点)坐标。...ev.screenX/ev.screenY: 事件发生时,鼠标点击位置相对于设备屏幕左上角(该点为原点)坐标 ev.offsetX/ev.offsetY: 事件发生时,鼠标点击位置相对于事件源左上角(...ev.pageX/ev.pageY 事件发生时,鼠标点击位置相对于页面左上角(该点为原点)坐标。...offset() 返回元素相对于 document (左上角为原点)的当前坐标值,因此即使页面向上拖动,坐标值也不变。

1.9K10

Window对象

frameElement: 返回嵌入当前window对象元素,或,如果当前window对象已经是顶层窗口,则返回null。...pageXOffset: 设置或返回当前页面相对于窗口显示区左上角X位置。 pageYOffset: 设置或返回当前页面相对于窗口显示区左上角Y位置。...screenLeft: 返回相对于屏幕窗口X坐标 screenTop: 返回相对于屏幕窗口Y坐标 screenX: 返回相对于屏幕窗口X坐标 screenY: 返回相对于屏幕窗口Y坐标 sessionStorage...onsubmit: 窗口内表单submit按钮被按下触发。 onhashchange: 当窗口锚点哈希值发生变化时触发。 鼠标相关 onclick: 当点击页面时触发。...onmouseup: 鼠标按键被松开时触发。 ondblclick: 当双击页面时调用事件句柄。 oncontextmenu: 在点击鼠标右键打开上下文菜单时触发。

2.4K20
  • scrollwidth和clientwidth_vue监听页面滚动

    offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定坐标的计算左侧位置...offsetTop 与 offsetParent 很复杂,不同浏览器有不同解释,浮动一下解释又不同了,所以我们一般只要理解通过二者可以获得控件在浏览器绝对位置即可。...,并不是由于对 offset 解释不同造成) 我们知道 offsetTop 可以获得 HTML 元素距离上方或外层元素位置,style.top 也是可以,二者区别是: 一、offsetTop 返回是数字...clientHeight 大家对 clientHeight 都没有什么异议,都认为是内容可视区域高度,也就是说页面浏览器可以看到内容这个区域高度,一般是最后一个工具条以下到状态栏以上这个区域...LEFT: 为从左向右移位置,即挂件距离屏幕左边缘距离; clientLeft 返回对象offsetLeft属性值和到当前窗口左边真实值之间距离 offsetLeft 返回对象相对于父级对象布局或坐标

    1.8K10

    再谈BOM和DOM(6):dom对象及event对象位值计算—offsetXTop,clentX

    event对象位置信息获取 先总结下区别: event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。...这2个属性不是标准属性,但得到了广泛支持。IE事件没有这2个属性。...event.offsetX、event.offsetY 鼠标相对于事件源元素(srcElement)X,Y坐标,只有IE事件有这2个属性,标准事件没有对应属性。...event.screenX、event.screenY 鼠标相对于用户显示器屏幕左上角X,Y坐标。...jsgetBoundingClientRect 当滚动位置发生了改变,top和left属性值就会随之立即发生变化(因此,它们值是相对于视口不是绝对)。

    1.5K20

    js、jQuery 获取文档、窗口、元素各种值

    基于两年开发经验,总结了 javascript、jQuery 获取窗口、文档、元素各种值 javascript: 文档:是整个document所有的内容 浏览器当前窗口文档body宽度: document.body.clientWidth...:obj.offset().top; 某个元素左边界距文档最左边距离:obj.offset().left; 鼠标移动: screenY: 鼠标相对于显示器屏幕左上角偏移 pageY...: 鼠标相对于页面左上角偏移 (其值会受滚动条影响,相当于整个文档,整个页面的Y值) IE9之下并不支持这个属性 clientY: 鼠标相对于浏览器窗口左上角偏移...相对容器水平坐标 event.offsetY 相对容器垂直坐标 layerY: 如果元素position样式不是默认static,我们说这个元素具有定位属性。...如果找不到具有定位属性元素,那么就相对于当前页面计算偏移,此时等同于pageY。

    14.1K32

    JStouch事件与canvas绘图

    Touch.screenX 触点相对于屏幕左边沿X坐标. Touch.screenY 触点相对于屏幕上边沿Y坐标....接触点 screenX是相对于屏幕左上角坐标 clientX是相对于窗口可视区左上角坐标 pageX是相对于窗口内页面的左上角坐标(常用) 所以相对于绘制区域坐标可以这样取到 {...,返回鼠标指针相对于文档水平坐标 pageY 触发鼠标事件时,返回鼠标指针相对于文档垂直坐标 screenX 触发事件时,返回鼠标指针相对于屏幕水平坐标 screenY 触发事件时,返回鼠标指针相对于屏幕垂直坐标...offsetX 返回鼠标指针相对于目标元素边缘位置水平坐标 offsetY 返回鼠标指针相对于目标元素边缘位置垂直坐标 movementX 返回鼠标指针相对于上一个mousemove事件位置水平坐标...假设我们获取window.devicePixelRatio为2,为了显示清晰我们把cavas宽高也放大了两倍,但是我们通过touch拿到坐标相对于页面cavas大小(和cavas内部大小不一致

    7.5K41

    Threejs入门之二十二:Threejs屏幕坐标转标准设备坐标

    标准设备坐标坐标不是绝对值,是相对值,其范围是[-1,1]区间,也就是说canvas画布上任何一个位置坐标,如果用标准设备坐标系来表示,那么坐标的值都是在-1到1之间。...screenX:鼠标点击位置相对于电脑屏幕左上角水平偏移量。 screenY:鼠标点击位置相对于电脑屏幕左上角垂直偏移量。...2 page坐标坐标原点:整个页面的左上角(整个页面的意思就是你整个网页全部,按照整个html文档长度和宽度来计算)。...pageY:鼠标点击位置相对于网页左上角垂直平偏移量,也就是 clientY + 垂直滚动条滚动距离。 坐标系上某一个元素pageX/pageY 不会 随着滚动条滚动改变。...offsetX:鼠标点击位置相对于触发事件对象水平距离。 offsetY:鼠标点击位置相对于触发事件对象垂直距离。

    2.2K10

    js获取鼠标当前位置坐标

    2017-03-01 10:08:42 在页面获取鼠标坐标通常有三种方式,这三种方式各有不同,所值也是不一样。  首先是相对于页面的pageX和pageY。...它指的是鼠标页面位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动变化。...他值鼠标页面上可视区域位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻滑动到位置为参考点,随滑动条移动 变化。 相对于屏幕来说screenX/screenY。...鼠标屏幕位置,从屏幕左上角开始(w3c标准) 相较于触发事件offsetX/offsetY。...这是一个IE特有的属性,鼠标相比较于触发事件元素位置,以元素盒子模型内容区域左上角为参考点,如果有boder,可能出现负值 相对于坐标layerX/layerY。

    14.7K20

    WPF 动画实战 点击时显示圆圈淡出效果

    就是点击时候,看命中到哪个元素,如果容器没有设置背景,那么这个容器就不能接收命中测试,也就是点击时候不会判断点击到这个容器 在后台代码添加鼠标点击代码 如何在 WPF 显示一个圆圈?...在 WPF ,可以通过 GetPosition 方法拿到鼠标相对于某个元素坐标,或者说鼠标点击到某个元素坐标。...原因是不同控件坐标是不同鼠标点击绝对坐标屏幕,但是应用控件一般都是相对于上一层容器,窗口等。...假设此时鼠标点击屏幕坐标是 (100,100) 而应用窗口坐标是 (10,10) 那么窗口里面的 x 元素想要知道此时鼠标点击在哪,难道还需要 x 控件自己去拿到当前窗口坐标在哪,然后换算出鼠标点击到...在 WPF 单位不一定是像素,因为 WPF 和屏幕具体分辨率等有很复杂关系,详细请看本文最后参考文档 还记得刚才是如何修改元素坐标

    2.5K20

    前端测试题:(解析)如果要获取鼠标在当前文档位置,可以使用下面哪些属性?

    X,Y坐标位置(不包含滚动条) event.clientX; event.clientY; pageX&pageY:触发事件时,鼠标相对于网页X,Y坐标位置(包含滚动条) event.pageX...; event.pageY; offsetX&offsetY: 指触发事件时鼠标相对于事件标签左上角坐标偏移量。...):阻止冒泡或捕获 event.stopPropagation(); 一图以概之 总结:event事件属性: pageX返回触发鼠标事件时,鼠标指针相对于当前页面(文档)水平坐标, pageY...返回触发鼠标事件时,鼠标指针相对于当前页面(文档)垂直坐标; screenX返回窗口/鼠标指针相对于屏幕水平坐标, screenY返回窗口/鼠标指针相对于屏幕垂直坐标; clientX返回触发鼠标事件时...,鼠标指针相对于当前窗口水平坐标, clientY返回触发鼠标事件时,鼠标指针相对于当前窗口垂直坐标; offsetX返回鼠标指针相对于目标元素边缘位置水平坐标, offsetY返回鼠标指针相对于目标元素边缘位置垂直坐标

    1.1K30

    原生 JS DOM 常用操作大全

    ()获取到是动态集合,即:当页面增加了标签,这个集合也就增加了元素。...target使终指向是事件触发元素 123 abc abc abc 鼠标的事件对象 e.clientX 返回鼠标相对于浏览器窗口可视区 X 坐标e.clientY 返回鼠标相对于浏览器窗口可视区...Y 坐标e.pageX 返回鼠标相对于文档页面的 X 坐标 IE9+ 支持e.pageY 返回鼠标相对于文档页面的 Y 坐标 IE9+ 支持e.screenX 返回鼠标相对于电脑屏幕 X 坐标e.screenY...返回鼠标相对于电脑屏幕Y 坐标 操作元素 修改元素内容 Element.innerText 只显示纯文本,去除html标签,同时去除了空格和换行Element.innerHTML...方法一: 在处理程序内最后 添加 return false ;方法二: 在 a标签中加 javascript:; 自定义属性操作 为什么需要自定义属性:用于在页面存储数据不用在数据库存储 Element

    10210

    JavaScript——DOM事件高级

    alert('222'); btn[1].removeEventListener('click', fn); } DOM事件流 事件流描述是从页面接收事件顺序...原理:不是每个子节点单独设置事件监听器,而是事件监听器设置在父节点上,然后利用冒泡原理影响设置每个子节点。 作用:只操作一次DOM,提高程序性能。...document.addEventListener('selectstart', function (e) { e.preventDefault(); }) 鼠标页面坐标...鼠标事件对象 说明 e.clientX 返回鼠标相当于浏览器窗口可视区X坐标 e.clientY 返回鼠标相对于浏览器窗口可视区Y坐标 e.pageX 返回鼠标相对于文档页面的X坐标 IE9+支持...e.pageY 返回鼠标相对于文档页面的Y坐标 IE9+支持 e.screenX 返回鼠标相对于电脑屏幕X坐标 e.screenY 返回鼠标相对于电脑屏幕Y坐标 JavaScript案例:下拉菜单

    1.8K10

    JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth「建议收藏」

    offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定坐标的计算左侧位置...offsetTop 与 offsetParent 很复杂,不同浏览器有不同解释,浮动一下解释又不同了,所以我们一般只要理解通过二者可以获得控件在浏览器绝对位置即可。...,并不是由于对 offset 解释不同造成) 我们知道 offsetTop 可以获得 HTML 元素距离上方或外层元素位置,style.top 也是可以,二者区别是: 一、offsetTop 返回是数字...LEFT: 为从左向右移位置,即挂件距离屏幕左边缘距离; clientLeft 返回对象offsetLeft属性值和到当前窗口左边真实值之间距离 offsetLeft 返回对象相对于父级对象布局或坐标的...left值,就是以父级对象左上角为坐标原点,向右和向下为X、Y轴正方向x坐标 pixelLeft 设置或返回对象相对于窗口左边位置 scrollWidth 是对象实际内容宽,不包边线宽度

    7.2K20

    浅谈JavaScript事件(事件模拟)

    事件经常由操作或者通过浏览器功能触发,通过JavaScript也可以触发元素事件。通过JavaScript触发事件,也称为事件模拟。...这几个字符串如下:UIEvents,一般化ui事件,鼠标事件和键盘事件都继承于该事件,在DOM3级是UIEvent;MouseEvents,一般化鼠标事件,在DOM3级是MouseEvent;MutationEvents...这个方法接收15个参数,分别与鼠标事件典型属性一一对应,属性如下:type,表示要触发事件类型,“click”;bubbles,是否支持冒泡,true;cancelable,表示事件是否可以取消...,true;view,事件关联视图,一般是document.defaultView;detail,与事件有关详细信息,通常设置为0;screenX,事件相对于屏幕x坐标;screenY,事件相对于屏幕...y坐标;clientX,事件相对于视口X坐标;clientY,事件相对于视口Y坐标;ctrlKey,表示是否按下了ctrl键,一般为false;shiftKey,表示是否按下了shit键,一般为false

    2K70

    Canvas 绘图技术:如何实现签名板签名功能以及导出图片

    正文内容 一、Canvas 概述 Canvas 是 HTML5 一个重要特性,它允许我们使用 JavaScript 在网页上绘制图形和动画。...Canvas 是一个矩形区域,我们可以在这个区域内使用 JavaScript 绘制各种图形,线条、矩形、圆形、多边形等。...我思路是,签名版是一个可以在上面绘制签名区域,我们可以通过鼠标或触摸屏幕来绘制签名。 而在 Canvas 上绘制签名版关键是监听鼠标或触摸事件,并根据事件坐标绘制签名。...接着使用 ctx.moveTo() 方法将画笔移动到鼠标点击位置,e.clientX 和 e.clientY 表示鼠标相对于浏览器窗口坐标 canvas.offsetLeft 和 canvas.offsetTop...表示 Canvas 元素相对于浏览器窗口左上角偏移量。

    86542

    接上一篇事件详解

    事件类型: DOM3级事件规定了以下几类事件;如下: UI事件: 当用户与页面元素交互时触发; load事件:当页面加载完后(包括所有图像,所有javascript文件,css文件等外部资源),就会触发...和mouseleave,所有鼠标事件都会冒泡,也可以被取消,取消鼠标事件将会影响浏览器默认行为。...理解客户区坐标位置 含义是:鼠标指针在可视区水平clientX和垂直clientY坐标; 理解页面坐标位置pageX和pageY: pageX与pageY是指页面坐标的位置,与clientX和clientY...区别是:它包含页面滚动条位置, 屏幕坐标screenX和垂直坐标screenY属性是相对于整个屏幕 理解鼠标滚轮事件: IE6首先实现了mousewheel事件,此后opera,chrome和safari...e = EventUtil.getEvent(e); alert(e.wheelDelta); }); 如上代码,我不是在document对象或者window对象上,而是在页面btn元素上触发

    1.9K60

    前端入门6-JavaScript客户端api&jQuery

    a; boolean a; JavaScript ,统一用 var 定义一个变量: var a; 变量数据类型 虽然声明变量时,不必指出变量类型,但也要清楚下,JS 基本数据类型 : ?...并且,并不是一个元素所有文本内容作为一个 Text 对象,如果文本内容被其他元素标签分割开了,那么这些文本内容会被分割成多份节点,都作为元素子元素拼接在 DOM 树。...(不是所有浏览器都允许js关闭窗口) focus() 让窗口获得键盘焦点 scrollBy(x, y) 让文档相对于当前位置进行滚动 scrollTo(x, y) 滚动到指定位置 alert(msg)...MouseEvent button 标明点击是哪个键,0:鼠标主键,1:中键,2:次键 altkey 事件触发时是否有点击alt键 clientX 事件触发时鼠标相对于元素视口X坐标 clientY...事件触发时鼠标相对于元素视口Y坐标 screenX 事件触发时鼠标相对于屏幕坐标X坐标 screenY 事件触发时鼠标相对于屏幕坐标Y坐标 shiftKey 事件触发时是否有点击shift键

    6K40
    领券