<ul>
<li>offsetX/Y
<p>相对于被点击元素的左上角,即使事件被绑定在父元素身上,那么这个位置也是相对于当前的target对象元素来说</p>
</li>
<li>pageX/Y
<p>相对于文档document的左上角,即使有滚动条,文档被滚入一部分不可见,但这个位置依然是相对于文档来计算,包含的有文档被滚动条滚动隐藏的不可见部分</p>
</li>
<li>clientX/Y
<p>相对于浏览器可视窗口的左上角,但是不包含浏览器的导航,页签等部分,仅限于浏览器展示文档的可见区域,不包含滚动条隐藏的内容</p>
</li>
<li>screenX/Y
<p>相对于电脑屏幕的左上角,如果是多屏,那么这个位置是相对于主屏幕来计算
</p>
</li>
</ul>
click_event.png
<p>
如图,事件是绑在粉红的大div上面,点击黑点位置(在绿色小div上)
offsetX/Y就是相对于小绿来计算,差不多是(0, 0);
pageX/Y是红线表示的范围,因为页面有竖向滚动条切文档向上滚动隐藏了一部分,所以y方向上会计算隐藏的距离;
clientX/Y是蓝色线条表示的范围,y方向上不包含浏览器书签,导航栏,页签等的距离;
screenX/Y是绿线表示的范围,到屏幕的距离.
</p>
