就用一张图来说明 [image.png] offsetX： 指事件发生位置相对触发元素左上角的水平坐标 layerX： FF特有,鼠标相比较于当前坐标系的位置,即从当前容器依次往上寻找设置绝对定位或相对定位的元素为参考坐标系
layerX,layerY layerX,layerY 往上找有定位属性的父元素的左上角（自身有定位属性的话就是相对于自身），都没有的话，就是相对于body的左上角 当元素及它的父级都没有定位属性时，以 layerX,layerY，往上找有定位属性的父元素的左上角（自身有定位属性的话就是相对于自身），都没有的话，就是相对于body的左上角 pageX，pageY相对页面左上角的距离 screenX screenY
个人网站、项目部署、开发环境、游戏服务器、图床、渲染训练等免费搭建教程，多款云服务器20元起。
Drag.fixEvent = function(e){ 33 e = e || window.event; 34 // 在此处，Chrome的layerX 35 // 另外，无法修改事件对象的属性，只能另外添加 36 if(typeof e.layerX == "undefined" || e.layerX e.offsetX; 38 e.lY = e.offsetY; 39 }else{ 40 e.lX = e.layerX 84 //设定鼠标的移动范围 85 if(this.minX) 86 this.minMouseX = e.layerX
之前说过两种获取事件对象的方法 下面说一下,事件对象(事件源)获取位置的方法: layerX/layerY与offsetX/offsetY获取事件源于鼠标作用的位置信息 IE: offsetX 当鼠标事件发生的时候，鼠标相对于事件源X轴的位置 offsetY FF: layerX 当鼠标事件发生的时候，鼠标相对于事件源X轴的位置 layerY 下面简单代码实现事件源位置内容的获取: 鼠标. 事件=function(e){ ev=window.event||e;//为了兼容低版本ie和流行版本的符合w3c规则的浏览器前者是低版本ie,后者是w3c的大众浏览器 var left=ev.layerX
于是开始“度娘”、“谷哥”……终于发现了两个不是很起眼的属性：layerX/Y和offsetX/Y属性。 layerX/Y和offsetX/Y属性 这两个属性跟clientX/Y属性一样，也是事件对象里面的一个属性，但是它们有何区别呢？ 别急，咱们一个一个的来分析 layerX/Y属性的说明 layerX/Y获取到的鼠标位置是参考被触发元素左上角的距离 outerEle.onclick = function(e) { // 处理事件对象兼容 var e = e || window.event; console.log(e.layerX); } 在click事件中把e.clientX换成e.layerX，然后进行测试。 简要概括这两个属性 当触发元素设置了position属性（属性值不能是static | inherit）,layerX/Y和offsetX/Y就成为了友好的朋友，基本上相同，唯一不同的是，layerX/
layerX:FF特有，鼠标相对于“触发事件的元素的层级关系中离该元素最近的，设置了position的父元素”的边界的位置，从border的左上角开始定位，即如果这个父元素存在border，则坐标原点在 x：IE特有，跟layerX一个效果，可作为layerX的直接替换属性。
document.addEventListener("mouseout", onDocumentMouseOut, false); //按下去的时候鼠标相对位置 mouseXOnMouseDown = event.layerX targetRotation; } function onDocumentMouseMove(event) { //移动的时候鼠标相对位置 mouseX = event.layerX event.touches.length === 1) { event.preventaDefault(); mouseXOnMouseDown = event.touches[0].layerX event.touches.length === 1) { event.preventaDefault(); mouseX = event.touches[0].layerX
这是一个IE特有的属性,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有boder,可能出现负值 相对于坐标系的layerX/layerY。 鼠标相比较于当前坐标系的位置,即如果触发元素没有设置绝对定位或相对定位,以页面为参考点,如果有,将改变参考坐标系,从触发元素盒子模型的border区域的左上角为参考点也就是当触发元素设置了相对或者绝对定位后,layerX 完全支持所有属性.其中(offsetX和layerX都是以border为参考点) 下面这个是获取相对于屏幕的坐标 document.onmousemove = function(e) { e =
获取鼠标位置信息 按下鼠标时鼠标的位置 // 按下鼠标 down = (self, e) => { const { offsetX, offsetY, layerX, layerY } = e; this.mouseX = offsetX || layerX; this.mouseY = offsetY || layerY; console.log('mouseX, this.isMove = true; }; 移动鼠标时鼠标的位置 // 移动鼠标 move = (self, e) => { const { offsetX, offsetY, layerX posNo----', this.posNo); // console.log('矩形实例----', this.rect) let cur_x_point = offsetX || layerX posNo----', this.posNo); // console.log('矩形实例----', this.rect) let cur_x_point = offsetX || layerX
得到的数值感觉不是很准，了解一下就好... layerX / layerY layerX 和 layerY 都是只读属性。
//给画板新增按下事件 c.onmousedown=function(e){ //获取事件对象 var ev=window.event||e; //获取事件源的位置 var old_left=ev.layerX （鼠标）添加移动事件 c.onmousemove=function(e){ //获取事件对象 var ev=window.event||e; //获取移动后事件源位置 var now_left=ev.layerX
onDocumentMouseMove(event) { event.preventDefault(); //转换坐标至（-1,1）范围 mouse.set((event.layerX function onDocumentMouseDown(event) { event.preventDefault(); mouse.set((event.layerX
none" }; var color = document.getElementById("color"); function pick(event) { var x = event.layerX
drag(dv){ dv.οnmοusedοwn=function(e){ var d=document; e = e || window.event; var x= e.layerX
FireFox 不支持 ev.layerX/ev.layerY： 事件发生时，鼠标点击位置相对于 document 或者设置了定位的事件源左上角（该点为原点）的坐标。 仅 FireFox 支持，要想使 layerX 与 offsetX 相等，必须给事件源设置定位。 ev.pageX/ev.pageY 事件发生时，鼠标点击位置相对于页面左上角（该点为原点）的坐标。
running) { clear() ball.x = e.layerX; ball.y = e.layerY; //ball.x = e.clientX;
window.innerHeight ) * 2 + 1; 是针对全屏的情况，如果是一个div范围，窗口的宽度与高度要改成div的宽度与高度，event.clientX与ent.clientY也要改成event.layerX selectObject.material.color.set("#69f"); selectObject = null; } var intersects = getIntersects(event.layerX
获取当前鼠标相对浏览器的原点的坐标 $('div').mousemove(function(e) { var xx = e.originalEvent.x ||e.originalEvent.layerX
扫码关注腾讯云开发者
领取腾讯云代金券
云服务器
云数据库 SQL Server
网站备案
文件存储
SSL 证书
