【pageX和pageY】的更多相关文章

pageX、pageY全兼容

pageX.pageY全兼容 var pos=function(o,x,y,event){var posX=0,posY=0;var e=event||window.event;if(e.posX||e.posY){   posX=e.pageX;   posY=e.pageY;}else if(e.clientX||e.clientY){   posX=e.clientX+document.documentElement.scrollLeft+document.body.scrollLeft;…

一文看懂js中的clientX，clientY，pageX，pageY，screenX，screenY

一. 客户区坐标位置(clientX,clientY) 鼠标事件都是在浏览器视口中的特定位置发生的.这个位置信息保存在事件对象的clientX和clientY属性中,所有浏览器都支持这两个属性. 我们知道了这个位置信息我们可以做些什么了?举个例子,有时候我们需要获取鼠标在某一个元素中的相对位置,做一些事情,比如自定义拖动条. 案例代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse…

pageX和pageY

pageX() 属性是鼠标指针的位置,相对于文档的左边缘. pageY() 属性是鼠标指针的位置,相对于文档的上边缘. 例1 $(document).mousemove(function(e){ $("span").text("X: " + e.pageX + ", Y: " + e.pageY); }); 例2 $('#demo').off('click').on('click',function(e){ $("span")…

理解 e.clientX,e.clientY e.pageX e.pageY e.offsetX e.offsetY

event.clientX.event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条.IE事件和标准事件都定义了这2个属性 event.pageX.event.pageY 类似于event.clientX.event.clientY,但它们使用的是文档坐标而非窗口坐标.这2个属性不是标准属性,但得到了广泛支持.IE事件中没有这2个属性. event.offsetX.event.offsetY 鼠标相对于事件源元素(srcElement)的X,…

元素位置pageX,pageY,clientX,clientY,scrollX,scrollY,screenX,screenY,offsetX,offsetY

总结: event.clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条. (可见区域)event.clientY 设置或获取鼠标指针位置相对于当前窗口的 y 坐标,其中客户区域不包括窗口自身的控件和滚动条. (可见区域)event.offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标. (触发事件的元素,ie,chrome支持此属性,ff不支持)event.offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y…

手机e.pageX和e.pageY无效的原因

手机端拖拽事件: touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发. touchmove事件:当手指在屏幕上滑动的时候连续地触发.在这个事件发生期间,调用preventDefault()事件可以阻止滚动. touchend事件:当手指从屏幕上离开的时候触发. touchcancel事件:当系统停止跟踪触摸的时候触发. 调用方法:(1)jquery方法:$(document).bind("touchend", function(e){}):(2)ja…

pageX/Y, offset(), position(), scrollTop(), screenX/Y, clientX/Y, pageX/Y

event.pageX get mouse position Description: The mouse position relative to the left edge of the document. Example <script> $(document).on( "mousemove", function( event ) { console.log( "pageX: " + event.pageX + ", pageY: &qu…

图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别

通过 3 张图和 1 张表格,轻松区别 JavaScript Event 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性. 一.测试代码如下: <!DOCTYPE HTML> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>Javascript</title> <st…

offsetWidth, offsetHeight, offsetLeft, offsetTop,clientWidth, clientHeight,clientX,pageX,screenX

offsetWidth: 元素在水平方向上占用的空间大小.包括元素的宽度,内边距,(可见的)垂直滚动条的宽度,左右边框的宽度. offsetHeight:元素在垂直方向上占用的空间大小,包括元素的高度,内边距,(可见的)水平滚动条的高度,上下边框的高度. offsetLeft: 元素的左边框至包含元素的左内边框之间的像素距离 offsetTop: 元素的上边框至包含元素的上内边框之间的像素距离 offsetParent: 保存着包含元素的引用 注意: 1.当对象的offsetParent属性指向…

扒一扒offsetleft，srollleft，pagex，clientx，postion().left等精确位置的获取与理解

先上个pc端和手机端的图:   说明:上面的属性,都是in这个div的属性值.我是点击的in这个div的左上角,所以pageX.pageY是40. HTML: <div class="out"> <div class="in"></div> </div> css: .out{ width: 300px; height: 300px; background: skyblue; overflow: hidden; } .i…