获取鼠标单击的位置

使用:将下两个方法赋值到代码中即可,

直接调用displayCursorPosition(event)方法就行。

// 获取鼠标位置
		function displayCursorPosition(event)  
		{  
		  if (typeof event == "undefined")  
		  {  
		    event = window.event;  
		  }  
		  
		  var scrollingPosition = getScrollingPosition();  
		  var cursorPosition = [0, 0];  
		  
		  if (typeof event.pageX != "undefined" && typeof event.x != "undefined")  
		  {  
		    cursorPosition[0] = event.pageX;  
		    cursorPosition[1] = event.pageY;  
		  }  
		  else  
		  {  
		    cursorPosition[0] = event.clientX + scrollingPosition[0];  
		    cursorPosition[1] = event.clientY + scrollingPosition[1];  
		  }  
		  
		  return  cursorPosition;
		}  
		// 获取当前滚动位置
		function getScrollingPosition(){  
		    var position = [0, 0];  
		    //FF  
		    if (typeof window.pageYOffset != 'undefined'){  
		        position = [  
		            window.pageXOffset,  
		            window.pageYOffset  
		        ];  
		    }  
		    //IE  
		    else if (typeof document.documentElement.scrollTop  
		        != 'undefined' && document.documentElement.scrollTop > 0 ||  
		        document.documentElement.scrollLeft > 0)  
		    {  
		        position = [  
		            document.documentElement.scrollLeft,  
		            document.documentElement.scrollTop  
		        ];  
		    }  
		    else if (typeof document.body.scrollTop != 'undefined')  
		    {  
		        position = [  
		            document.body.scrollLeft,  
		            document.body.scrollTop  
		        ];  
		    }  
		    return position;  
		}


例如:

function clickDiv(event){
			var cursorPosition = displayCursorPosition(event);
			pageX=cursorPosition[0];
			pageY=cursorPosition[1];
			// 整个页面(滚动条)的坐标位置
			//alert(pageX+"-"+pageY);
			// 客户区的坐标位置
			//alert(event.clientX+"-"+event.clientY);
			// 如果 鼠标点击位置大于客户区620
			if(event.clientX >= 620){
				pageX = pageX - parseInt($("#divInfo").css("width"))-5;
			}
			// 如果 div的高度将会大于客户区的高度
			if((event.clientY+parseInt($("#divInfo").css("height")))>=800){
				pageY = pageY - parseInt($("#divInfo").css("height"))-30;
			}
			// 设置div出现的位置是:鼠标单击的整个页面内的绝对位置
			$("#divInfo").css('position','absolute');
			$("#divInfo").css('left',pageX+"px");
			$("#divInfo").css('top',pageY+"px");
			$("#divInfo").show();
		}








你可能感兴趣的:(前端)