JavaScript获取Input输入框的屏幕绝对位置

需求:使用JavaScript,在input输入框被点击时获取input坐标的绝对位置,this

原理:根据js中的元素offsetLeft、offsetTop获取相对于父元素的X、Y坐标相对位置,而后遍历到最顶层的body元素,逐步叠加距离,最终获取的位置即为input的绝对位置。code

代码以下:ip

//获取x坐标
	function getXPosition(e){
        var x=e.offsetLeft;  
        while(e=e.offsetParent)
        { 
             x+=e.offsetLeft; 
        }   
        return x-260;//-260防止屏幕超出
	}
	//获取y坐标
	function getYPosition(e){
		var y=e.offsetTop;  
        while(e=e.offsetParent)
        { 
             y+=e.offsetTop; 
        }   
        return y+80;//80为input高度
	}

//调用
$(".input").on("click",function(event){
	alert("x:"+getXPosition(this)+",Y:"+getYPosition(this));
});
相关文章
相关标签/搜索