展开

关键词

关于offsetX、layerX、clientX、screenX以及pageX

就用一张图来说明 [image.png] offsetX: 指事件发生位置相对触发元素左上角的水平坐标 layerX: FF特有,鼠标相比较于当前坐标系的位置,即从当前容器依次往上寻找设置绝对定位或相对定位的元素为参考坐标系

27200

简单拖拽实现

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

60740
  • 广告
    关闭

    腾讯云+社区系列公开课上线啦!

    Vite学习指南,基于腾讯云Webify部署项目。

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

    layerXlayerY与offsetXoffsetY区别

    之前说过两种获取事件对象的方法 下面说一下,事件对象(事件源)获取位置的方法:         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

    97550

    three.js鼠标控制物体旋转

    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

    2K41

    JavaScript 获取鼠标及元素在页面上的位置

    于是开始“度娘”、“谷哥”……终于发现了两个不是很起眼的属性: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/

    78660

    js获取鼠标当前位置坐标

    这是一个IE特有的属性,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有boder,可能出现负值 相对于坐标系的layerX/layerY。 鼠标相比较于当前坐标系的位置,即如果触发元素没有设置绝对定位或相对定位,以页面为参考点,如果有,将改变参考坐标系,从触发元素盒子模型的border区域的左上角为参考点也就是当触发元素设置了相对或者绝对定位后,layerX 完全支持所有属性.其中(offsetX和layerX都是以border为参考点) 下面这个是获取相对于屏幕的坐标 document.onmousemove = function(e) { e =

    2.2K20

    了解 Javascript Event 对象

    得到的数值感觉不是很准,了解一下就好... layerX / layerY layerX 和 layerY 都是只读属性。

    7830

    canvas之画板简单功能实现

    //给画板新增按下事件 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

    21130

    threejs 之 复制删除正方体 原

    onDocumentMouseMove(event) { event.preventDefault(); //转换坐标至(-1,1)范围 mouse.set((event.layerX function onDocumentMouseDown(event) { event.preventDefault(); mouse.set((event.layerX

    55820

    canvas-颜色选择器 原

    none" }; var color = document.getElementById("color"); function pick(event) { var x = event.layerX

    32150

    HTML坐标系与鼠标事件坐标

    事实上,e.layerX/e.layerY 与 e.x/e.y 这两个属性比较特殊。 考虑到它们不那么常见(因为受浏览器种类影响),而且使用时需要考虑的情况相对复杂(layerX/layerY对于absolute绝对定位元素,参考点是当前点击元素的左上角;对于relative相对定位元素 Chrome Firefox IE8 - IE9 IE10 + offsetX √ × √ √ √ clientX √ √ √ √ √ pageX √ √ × √ √ screenX √ √ √ √ √ layerX

    29050

    DOM 和 BOM 中的各种宽高属性

    FireFox 不支持 ev.layerX/ev.layerY: 事件发生时,鼠标点击位置相对于 document 或者设置了定位的事件源左上角(该点为原点)的坐标。 仅 FireFox 支持,要想使 layerX 与 offsetX 相等,必须给事件源设置定位。 ev.pageX/ev.pageY 事件发生时,鼠标点击位置相对于页面左上角(该点为原点)的坐标。

    37310

    canvas动画-跟着鼠标移到的小球 原

    running) { clear() ball.x = e.layerX; ball.y = e.layerY; //ball.x = e.clientX;

    27430

    three.js 事件交互 原

    window.innerHeight ) * 2 + 1; 是针对全屏的情况,如果是一个div范围,窗口的宽度与高度要改成div的宽度与高度,event.clientX与ent.clientY也要改成event.layerX selectObject.material.color.set("#69f"); selectObject = null; } var intersects = getIntersects(event.layerX

    48430

    three.js 事件交互

    window.innerHeight ) * 2 + 1; 是针对全屏的情况,如果是一个div范围,窗口的宽度与高度要改成div的宽度与高度,event.clientX与ent.clientY也要改成event.layerX selectObject.material.color.set("#69f"); selectObject = null; } var intersects = getIntersects(event.layerX

    2.6K90

    JS魔法堂:关于元素位置和鼠标位置的属性

    evt.layerX/Y :当触发点所在的dom的position为relative或absolute时,则以dom的border外边框的左上角作为参考点,否则就以页面左上角为参考点(与pageX一致了

    668100

    触发浏览器回流的属性方法一览表

    window.getMatchedCSSRules() 仅会导致样式重新计算 表单: inputElem.focus() inputElem.select(), textareaElem.select() 鼠标事件: mouseEvt.layerX

    72530

    Echarts Label 过长展示省略号

    $refs.labelTip[0].style.left = params.event.event.layerX+10 + 'px' this.

    6120

    扫码关注云+社区

    领取腾讯云代金券