JS获取页面坐标数据 1.client系列 event.clientX 和 event.clientY:点击位置距离当前body可视区域的x,y坐标 2.screen系列 event.screenX 和 event.screenY: 点击位置距离当前电脑屏幕的x,y坐标 3.offset系列 eve
clientX和clientY与x,y一样的,以浏览器显示区域的左上角开始,指鼠标的坐标。x,y是新浏览器支持 offsetX,offsetY,针对目标元素的左上角坐标,从padding开始。 layerX,layerY,往上找有定位属性的父元素的左上角(自身有定位属性的话就是相对于自身),都没有的话,就是相对于body的左上角 pageX,pageY相对页面左...
jQuery event 事件对象,包含有 event.offsetX, event.clientX,event.pageX,event.screenX等属性(firefox 浏览器中, offsetX 为 undefined)。firefox 获取 offsetX / offsetY 的值,需要通过 event 对象的属性 originalEvent。 $(function(){ $("#box").mousedown(function(event){ console.log(event.offsetX, ev...
smallObjc.onmousemove = function (e) { e = window.event || e; var x = e.clientX - maskObjc.offsetWidth * 0.5 ; var y = e.clientY - maskObjc.offsetHeight * 0.5; //因为box有一个margin ,所以需要减去 x = x - 100; y = y -100; //处理边界 //上边界和左边界 x = x < 0...
一、测试代码 二、图解 event.offsetX,event.clientX,event.pageX,event.screenX属性 三、图解 event.layerX,e...
var e = ev || window.event; var div1 = document.getElementById('div1'); div1.innerHTML = "offsetX:"+ e.offsetX +",offsetY : "+ e.offsetY; }*/ 这里我需要解释一下我上面说的“浏览器有效区域”这句话,下图中黑色边框区域就是浏览器的有效区域,而整个图片显示的区域就是 “显示器屏幕...
} } 二、不同浏览器对这些属性的支持: 三、图解 event.offsetX,event.clientX,event.pageX,event.screenX属性 四、图解 event.layerX,event.layerY 属性 五、图解 event.layerX,event.layerY 属性
通过3 张图和 1 张表格,轻松区别 JavaScript Event 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性。 一、测试代码如下: <!DOCTYPE HTML>Javascriptbody{margin:0;padding:0;background:#ccc;font-size:12px;overflow:auto}.main{width:500px;height:330px;position:relative;margin:250px auto...
现在给触发元素设定mousedown,在down事件中给父容器添加mousemove事件。 父容器的mousemove事件找到e.offsetX也就是当前鼠标位置,然后把值添加到子元素中那么现在的问题时,在触发父元素的move事件当中,如果移动到子元素身上它的e.offsetX就会是想对于子元素的那个值了。。。 这个问题请问大家怎么解决呢? 有没有碰到过...
event.offsetX/Y event.layerX/Y event.screenX/Y clientX/Y: clientX/Y获取到的是触发点相对浏览器可视区域左上角距离,不随页面滚动而改变 兼容性:所有浏览器均支持 pageX/Y: pageX/Y获取到的是触发点相对文档区域左上角距离,会随着页面滚动而改变 ...