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

event.pageX　　getmouse position

　　Description: The mouse position relative to the left edge of the document.

Example

1 <script>
2     $(document).on( "mousemove", function( event ) {3         console.log( "pageX: " + event.pageX + ", pageY: " +event.pageY );4     });5 </script>

.offset()　　get offset position of an element

　　Description: Get the current coordinates of the first element, or set the coordinates of every element, in the set of matched elements, relative to the document.

Example(get)

1 <script>
2     var p = $(element);3     var offset =p.offset();4     p.html( "left: " + offset.left + ", top: " +offset.top );5 </script>

Example(set)

1 <script>
2     //the parameter must be PlainObject
3     var coord = {top: 50, left: 100};4 $(element).offset(coord);5 </script>

.position() get the relative Position of an element

　　Description: Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.

　　Note: this method does not accept any arguments.

Example

1 <script>
2     var p =$(element);3     var position =p.position();4     console.log( "left: " + position.left + ", top: " +position.top );5 </script>

.scrollTop()

　　Description: Get the current vertical position of the scroll bar for the first element in the set of matched elements or set the vertical position of the scroll bar for every matched element.

Example(get)

1 <script>
2     var p = $(element);3     console.log( "scrollTop:" +p.scrollTop() );4 </script>

Example(set)

1 <script>
2     var topValue = 500;3 $(element).scrollTop(topValue);4 </script>

相关：.scrollLeft()

The difference between screenX/Y, clientX/Y and pageX/Y

pageX/Y gives the coordinates relative to the <html> element in CSS pixels.
clientX/Y gives the coordinates relative to the viewport in CSS pixels.
screenX/Y gives the coordinates relative to the screen in device pixels.

Example

1 <script>
2     document.addEventListener('click', function(e) {3 console.log(4             'page: ' + e.pageX + ',' +e.pageY,5             'client: ' + e.clientX + ',' +e.clientY,6             'screen: ' + e.screenX + ',' +e.screenY)7 });8 </script>

A picture explaining the difference between pageY and clientY:

jQuery Scroll to bottom of page/iframe

1 <script>
2     $('html, body').animate({3        scrollTop: $(document).height()-$(window).height()},4        2000
5 );6 </script>

Composite example

1 <!DOCTYPE html>
2 <htmllang="en">
3   <head>
4     <metacharset="utf-8">
5     <metahttp-equiv="X-UA-Compatible"content="IE=edge">
6     <title>Demo</title>
7   </head>
8   <bodystyle="height:1000px;">
9     <scriptsrc="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
10     <divid="A"style="left:100px;"> Default    <br/> mouse<br/>position </div>
11     <divid="B"style="left:300px;"> offset()   <br/> mouse<br/>position </div>
12     <divid="C"style="left:500px;"> position() <br/> mouse<br/>position </div>
13     <divid="D"style="left:700px;"> client     <br/> mouse<br/>position </div>
14   </body>
15   <style>
16 #A,#B,#C,#D{
17 width:100px;
18 height:100px;
19 cursor:pointer;
20 background:#2f2f2f;
21 position:absolute;
22 top:50px;
23 color:#fff;
24 font:bold 15px Arial;
25   }
26   </style>
27   <script>
28 $(document).ready(function(e) {29           //pageX
30 $('#A').click(function(e) {31 console.log(e.pageX+ ',' +e.pageY);32 });33           //offset()
34 $('#B').click(function(e) {35               varposX=$(this).offset().left,36 posY=$(this).offset().top;37 console.log((e.pageX-posX)+ ',' +(e.pageY-posY));38 });39           //position
40 $('#C').click(function(e) {41               varposX=$(this).position().left,42 posY=$(this).position().top;43 console.log((e.pageX-posX)+ ',' +(e.pageY-posY));44 });45           //client offset scroll
46 $('#D').click(function(e) {47               varoffset_t=$(this).offset().top-$(window).scrollTop();48               varoffset_l=$(this).offset().left-$(window).scrollLeft();49               varleft=Math.round( (e.clientX-offset_l) );50               vartop=Math.round( (e.clientY-offset_t) );51 console.log("Left:" +offset_t+ "Top:" +offset_l);52 });53 });54   </script>
55   </body>
56 </html>

转载于:https://www.cnblogs.com/hzj680539/p/5071607.html

pageX/Y, offset(), position(), scrollTop(), screenX/Y, clientX/Y, pageX/Y相关推荐

js事件坐标大乱斗：screenX、clientX、pageX、offsetX
screenX: 鼠标相对于电脑屏幕的X坐标 screenY: 鼠标相对于电脑屏幕的Y坐标 clientX/clientY: 鼠标的坐标到可视区域的坐标,比如在谷歌浏览器中,指工具栏之下的区域.注意跟 ...
关于screenX、clientX、pageX, offsetX的相关介绍
概念 1. offsetX 和offsetY offsetX :鼠标点击位置相对于触发事件对象的水平距离 offsetY:鼠标点击位置相对于触发事件对象的垂直距离 2. clientX 和client ...
图解事件坐标screenX、clientX、pageX, offsetX的区别
一.图解如图所示,假设页面中灰色圆点是鼠标点击处,黄色区域是鼠标触发事件对象二.概念 1.screenX 和screenY 参照点:电脑屏幕左上角 screenX:鼠标点击位置相对于电脑屏幕左上角 ...
screenX、clientX、pageX, offsetX的区别
一.图解 clientY.screenY.pageY.offsetY这四者是事件对象event上的属性如图所示:假设紫色正方形中心处是点击处,紫色区域是鼠标事件触发对象二.概念 1.screenX ...
screenX、clientX、pageX三者间的区别
screenX相当于鼠标事件触发时的位置到设备屏幕最左侧的距离. clientX相当于鼠标事件触发时的位置到浏览器可视窗口的最左侧距离. pageX相当于鼠标事件触发时的位置到body的最左侧距离,即 ...
位置相关属性offset(),position(),scrollTop()等
offset() : 获取匹配元素在当前窗口的相对偏移.位置是相对屏幕的,返回的对象包含两个整形属性:top 和 left.此方法只对可见元素有效. DEMO: <!DOCTYPE html P ...
clientX,offsetX,pageX,screenX的异同以Chrome浏览器测试
clientX,offsetX,pageX,screenX的异同对于这个问题我相信有不少刚刚学习DOM事件的小伙伴可能会比较懵逼,首先我们从文字上解释它的异同首先我们要明确对于浏览器而言,它的X还 ...
clientX、pageX、screenX以及offsetX区别
clientX.pageX.clientX以及offsetX区别 client系列(不包含滚动条) clientX:鼠标相对于浏览器窗口可视区域x方向坐标 clientY:鼠标相对于浏览器窗口可视区域 ...
详细区分offsetX，clientX，pageX，screenX，layerX和X的区别
详细区分DOM事件中鼠标指针的坐标问题前面博客中我们讲解到了DOM事件的event对象,里边包含了鼠标事件的指针坐标属性.比如event.offsetX,event.clientX,event.pa ...

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

pageX/Y, offset(), position(), scrollTop(), screenX/Y, clientX/Y, pageX/Y相关推荐

最新文章

热门文章