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

js获取鼠标当前位置坐标

2017-03-01 10:08:42 在页面中获取鼠标坐标通常有三种方式,这三种方式各有不同,所值也是不一样。  首先是相对于页面的pageX和pageY。...他值是鼠标在页面上可视区域位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻滑动到位置为参考点,随滑动条移动 而变化。 相对于屏幕来说screenX/screenY。...这是一个IE特有的属性,鼠标相比较于触发事件元素位置,以元素盒子模型内容区域左上角为参考点,如果有boder,可能出现负值 相对于坐标layerX/layerY。...FF特有,鼠标相比较于当前坐标位置,即如果触发元素没有设置绝对定位或相对定位,以页面为参考点,如果有,将改变参考坐标系,从触发元素盒子模型border区域左上角为参考点也就是当触发元素设置了相对或者绝对定位后...完全支持所有属性.其中(offsetX和layerX都是以border为参考点) 下面这个是获取相对于屏幕坐标 document.onmousemove = function(e) { e =

14.5K20
您找到你想要的搜索结果了吗?
是的
没有找到

JS获取事件对象获取事件对象(Firefox,IE)

做笔记,以防自己忘记~~ JS获取事件event,不同浏览器有不同做法。 例如IE下,在js函数中,通过window.event就可以获取,不必在函数中添加什么参数。...也可以用Prototype或者JQuery等,它们有他们对事件包装。还是使用JS库比较好,不然就有下边麻烦。...注意获取标记都以大写表示,如"TD","TR","A"等。所以把看过一些抄下来,不记得时候再来看看。...在 ie中处理事件直接使用window.event对象即可,但在firefox中,是没有 window.event对象,函数需要使用事件时候,需要在事件发生时把事件作为参数传递给函数,不象在ie...中,事件对象是全局,随处都可以访 问.下面这个getEvent()函数可以兼容firefox和ie,只需要在访问事件对象函数开始调用getEvent()即可,不用再把事件作为 参数传递.以下代码已经实验通过

10K50

JS遍历对象获取key:value

1、使用Object.keys()遍历 返回一个数组,包括对象自身(不含继承)所有可枚举属性(不含Symbol属性) var obj={"1":"a","2":"b"} Object.keys(...forEach(function (key) { console.log(key,obj[key]) }); 返回值: // 1 a // 2 b 2、使用for..in..遍历 循环遍历对象自身和继承可枚举属性...,其排列与使用 for…in 循环遍历该对象时返回顺序一致(区别在于 for-in 循环也枚举原型链中属性)。...3、使用Object.getOwnPropertyNames(obj)遍历 返回一个数组,包含对象自身所有属性(不含Symbol属性,但是包括不可枚举属性) var obj={"1":"a","2":...obj["name"] = "zhangsan" 访问对象属性值: 1.obj.name 2.obj["name"] ==》底层转化为这种,所以建议使用 删除对象属性: delete

26.7K11

JS获取html对象几种方式说明

大家好,又见面了,我是全栈君 document.getElementById(“zx”); 通过ID获取html元素对象,ID号在html文档当中应该是唯一。返回是唯一element对象。...document.getElementsByTagName(“span”)[0]; 通过标签查找html对象,由于html标签在一个页面中可能重复很多次,所以当前页面返回是一个数组。...可以根据标签出现位置定位元素对象。所有浏览器都兼容。...document.getElementsByName(“hh”)[0]; 通过name属性来定位html对象,但是并不是所有标签都有name属性,但是我们可以人为加上name属性,这样也可以定位到,由于...innerHTML:这个方法是获取该html元素具体html代码 document.getElementById(“zx”).innerHTML; 还可以更新元素html代码: document.getElementById

4.7K20

Android MotionEvent 坐标获取

Android MotionEvent中getX()与getRawX()都是获取屏幕坐标(横),但二者又有区别 getX()           :   是获取相对当前控件(View)坐标...getRawX()   :   是获取相对显示屏幕左上角坐标 演示示例代码 Java代码: public class MainActivity extends Activity implements...点击屏幕中间Button,获取坐标信息: ?...结果说明: x,y  :  分别获取相对Button控件坐标 getX(), getY() rawX,rawY  : 分别获取相对显示屏幕左上角坐标 getRawX(), getRawY() 总结...:  getX() 是表示Widget相对于自身左上角x坐标,而getRawX()是表示相对于屏幕左上角x坐标值(注意:这个屏幕左上角是手机屏幕左上角,不管activity是否有titleBar或是否全屏幕

1.9K30

JS操作对象属性(获取、添加、删除、修改对象属性)

示例4 在下面示例中定义一个对象,该对象包含三个属性,然后使用 getOwnPropertyNames 获取对象私有属性名称。...使用 Object.keys 使用 Object.keys() 函数仅能获取可枚举私有属性名称。...Object.getOwnPropertyDescriptor 使用 Object.getOwnPropertyDescriptor() 函数能够获取对象属性描述符。...示例5 在下面示例中定义一个对象 obj,包含 3 个属性,然后使用 Object.getOwnPropertyDescriptor() 函数获取属性 x 数据属性描述符,并使用该描述符将属性 x 设置为只读...xvar des = Object.getOwnPropertyDescriptor(obj, "x"); //重新获取属性x数据属性描述符for (var prop in des) { //遍历属性描述符对象

15.1K00

React技巧获取鼠标坐标位置

在event对象上访问相关属性。...为了得到相对于页面上某个元素鼠标坐标,我们必须从clientX减去offsetLeft,从clientY减去offsetTop。...offsetTop属性返回当前元素外边界相对于,位置最近祖先元素内边界之间像素数。 clientX属性返回事件发生时,在应用程序视口中水平坐标。...clientY属性返回事件发生时,在应用程序视口中垂直坐标。 监听鼠标事件 第二个示例向我们展示了,为了得到全局鼠标坐标,如何在window对象上监听mousemove事件。...清理步骤很重要,因为我们要确保我们应用程序中没有任何内存泄漏。 screenX/Y属性 screenX属性返回全局坐标中鼠标的水平坐标(偏移)。

2K20

前端js上传文件到COS对象存储后获取返回对象链接方法

项目开发过程中往往会遇到前端js上传文件到COS对象存储没有返回对象链接情况,今天跟大家分享一个CORS配置小技巧 由于COS上传密钥放在前端不安全,我们使用腾讯云生产临时密钥配置在前端,通过前端...js sdk上传文件到COS对象存储,在不做任何配置情况下,COS返回信息只有Status Code和headers信息 image.png 如果我们想直接获取到上传成功文件链接,需要在COS控制台...--找到相应存储桶--基础配置--跨域访问CORS设置中, 添加如下规则: 来源Origin 操作Methods Expose-Headers 超时Max-Age * PUT...GET POST DELETE HEAD Etag Content-Length x-cos-request-id 5 image.png 保存后重新通过JS SDK上传,此时就会返回上传成功后文件链接啦

13.1K11

win10 uwp 获取窗口坐标和宽度高度 获取可视范围获取当前窗口坐标和宽度高度获取最前窗口范围

本文告诉大家几个方法在 UWP 获取窗口坐标和宽度高度 获取可视范围 获取窗口可视大小 Windows.UI.ViewManagement.ApplicationView.GetForCurrentView...().VisibleBounds 获取当前窗口坐标和宽度高度 Window.Current.Bounds 获取最前窗口范围 通过 Win32 Api 获取最前窗口范围 IntPtr hWID...E5%8F%A3%E7%9A%84%E5%9D%90%E6%A0%87%E5%92%8C%E5%AE%BD%E5%BA%A6%E9%AB%98%E5%BA%A6.html ,以避免陈旧错误知识误导...,同时有更好阅读体验。...欢迎转载、使用、重新发布,但务必保留文章署名林德熙(包含链接: https://lindexi.gitee.io ),不得用于商业目的,基于本文修改后作品务必以相同许可发布。

3.7K30

js获取元素到文档区域document(横向、纵向)坐标的两种方法

获取页面中元素到文档区域document横向、纵向坐标的两种方法及其比较 在js控制元素运动过程中,对于页面元素坐标位置获取是经常用到,这里主要总结下两种方法: 一:通过叠加元素对象和它offsetParent...js代码: // 获取元素到文档区域坐标 function getPosition(element) { var actualLeft = element.offsetLeft, actualTop...js代码: // 获取元素到文档区域坐标 function getPosition(element){ var dc = document, rec = element.getBoundingClientRect...结语:上文已对如何获取元素相对于文档区域document坐标位置做出了阐述,如遇到相关问题,可联系本人或直接发表评论,另外,对于右坐标right以及下坐标bottom获取只需把left、top坐标的大小和元素本身宽度...ps:补充一点,利用该方法返回对象right-left = 元素宽度;bottom-top = 元素高度。可以获取不带边框元素本身宽度和高度。

2.5K30
领券