jquery在点击位置打开弹窗（考虑页面滚动因素）

获取坐标

1、相对于屏幕
如果是涉及到鼠标点击确定位置相对比较简单，获取到鼠标点击事件后，事件screenX，screenY获取的是点击位置相对于屏幕的左边距与上边距，不考虑iframe因素，不同浏览器下表现的还算一致。
代码如下:

function getMousePos(event) {
   var e = event || window.event;
    return {'x':e.screenX,'y':screenY}
}

2、相对浏览器窗口
绝大多数情况下我们希望获取鼠标点击位置相对于浏览器窗口的坐标，event的clientX，clientY属性分别表示鼠标点击位置相对于文档的左边距，上边距。
代码如下:

function getMousePos(event) {
    var e = event || window.event;
    return {'x':e.clientX,'y':clientY}
}

3、相对文档
clientX与clientY获取的是相对于当前屏幕的坐标，忽略页面滚动因素，这在很多条件下很有用，但当我们需要考虑页面滚动，也就是相对于文档（body元素）的坐标时怎么办呢？加上滚动的位移就可以了，下边我们试试怎么计算页面滚动的位移。
其实在Firefox下问题会简单很多，因为Firefox支持属性pageX,与pageY属性，这两个属性已经把页面滚动计算在内了。
在Chrome可以通过document.body.scrollLeft，document.body.scrollTop计算出页面滚动位移，而在IE下可以通过document.documentElement.scrollLeft ，document.documentElement.scrollTop
代码如下:

function getMousePos(event) {
	var e = event || window.event;
	var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
	var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
	var x = e.pageX || e.clientX + scrollX;
	var y = e.pageY || e.clientY + scrollY;
	//alert('x: ' + x + '\ny: ' + y);
	return { 'x': x, 'y': y };
}

应用场景
在点击位置打开弹窗

//设置弹窗位置
$('#ele').click(function (event) {
	$("#pane").css({display:"block",position:"absolute",'top':event.pageY,'left':event.pageX}); 
}
 

注：移动端触屏事件使用touchstart、touchmove、touchend

参考：https://www.jb51.net/article/35479.htm