Event获取clientX,offsetX,layerX,pageX,screenX

pageX、pageY对于整个页面来说，包括了被卷去的body部分的长度
clientX、clientY点击位置距离当前body可视区域的x，y坐标
screenX、screenY点击位置距离当前电脑屏幕的x，y坐标
offsetX：
获取到的是鼠标触发点相对于目标事件元素(被触发DOM)左上角的距离(确切的说是到边框外边界的距离)，其中在IE中以内容区左上角为基准点不包括边框，如果触发点在边框上会返回负值，而chrome中以边框左上角为基准点。
layerX：
获取到的是鼠标触发点相对于offsetParent元素左上角的距离(确切的说是到边框外边界的距离)，包括中间所有元素的padding、margin、border及元素宽度值之和)，其中在IE中以内容区左上角为基准点不包括边框，如果触发点在边框上会返回负值，而chrome中以边框左上角为基准点。

注： 1、如果元素位于body中，e.clientX + document.body.scrollLeft - document.body.clientLeft = e.pageX，
2、e.clientX包括了body的边框，document.body.scrollLeft也包括了body边框，body表框运算重复，减去document.body.clientLeft，即去掉重复的body边框
关于offsetParent元素：如果当前元素的祖先元素没有进行CSS定位（position为absolute或relative），offsetParent为body，否则offsetParent取最近的那个祖先元素(包括当前元素)。

总结：
1、使用pageX获取带滚动条的到页面边缘尺寸
2、使用clientX获取到浏览器可视区域的尺寸，没有滚动条，pageX == clientX
3、使用screenX获取到屏幕边缘尺寸
4、使用offsetX获取到当前元素边缘尺寸
5、使用layerX获取到offsetParent边缘尺寸

layerX/layerY;
上图参考 https://blog.csdn.net/lzding/article/details/45437707 （原文内容不错，建议看原文）

图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别
我觉得这里讲的很好 区分了不同浏览器下的情况
https://www.cnblogs.com/jiangxiaobo/p/6593584.html

不同浏览器下 clientX,offsetX,layerX,pageX,screenX,X鼠标位置全解
https://www.cnblogs.com/xulei1992/p/5659923.html

					<link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-7f770a53f2.css" rel="stylesheet">
            </div>
								
				<script>
					(function(){
						function setArticleH(btnReadmore,posi){
							var winH = $(window).height();
							var articleBox = $("div.article_content");
							var artH = articleBox.height();
							if(artH > winH*posi){
								articleBox.css({
									'height':winH*posi+'px',
									'overflow':'hidden'
								})
								btnReadmore.click(function(){
									articleBox.removeAttr("style");
									$(this).parent().remove();
								})
							}else{
								btnReadmore.parent().remove();
							}
						}
						var btnReadmore = $("#btn-readmore");
						if(btnReadmore.length>0){
							if(currentUserName){
								setArticleH(btnReadmore,3);
							}else{
								setArticleH(btnReadmore,1.2);
							}
						}
					})()
				</script>
				</article>