当前鼠标座标（不在事件中）

hetengfei_ 2011-12-02 09:57:20

js 取当前鼠标座标问题。

提示：



$(document.body).mousemove(function(ev) {

    ev = ev || window.event;		

    document.title="x:"+ev.clientX.toString()+"y:"+ev.clientY.toString()+";"

}

不要写这种给我，这个我会。

我要下面这种

var TimerGetPoint = setInterval	(function(ev){

   var MouseX=' 你在这里写代码';

   var MouseY=' 你在这里写代码';

   document.title="x:"+MouseX+"y:"+MouseY+";"

},100);

...全文

202 16 打赏收藏转发到动态举报

写回复

用AI写文章

16 条回复

切换为时间正序

请发表友善的回复…

发表回复

hetengfei_ 2011-12-03

打赏
举报

上面的方法，没有类似的bug，（不管你拖多快，没事！）
因用setInterval 来实现的。

hetengfei_ 2011-12-03

打赏
举报

昨天写了很久，好在还不负我所望。（终于写出来了）

在此，我将贴出源码。大家瞧瞧，发现什么问题尽管说。（比如代码规划得不够整结，位置调调等等都可以说说，我虚心听取大家的意见。）



<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

    <title></title>

    <style type="text/css">

    /*----------------这里是card Page CSS------------------*/

		#MainCardDiv{

			width: 200px;

			height: 100%;

			position: absolute;

			top:100px;

			left:600px;

			margin: 1px;

			padding: 1px;

			border-color:Green;

			border-width:1px;

			border-style:solid;

			background-color:#e0e0e5;

			

		}

		/*标题*/

		#cardFirstRow

		{

			border-color:Yellow;

			background-color:#304054;

			color:White;

			border-width:1px;

			border-style:solid;

			height:20px;

			width:100%;

			cursor:pointer;

		}

		#SmallAndCancel{

			float:right;

			width:60px;

			height:100%;

		}

		#cardDisplayMenu,#cardAutoMide,#cardCancel

		{

			float:left;

			width:18px;

			height:18px;

			border-width:1px;

			border-style:solid;

			border-color:#b0b0b0;

			background-color:White;

			color:#000;

			cursor:pointer;

		}

		#cardThirdRow,#cardSecondRow

		{

			border-color:Green;

			background-color:#c0c0c0;

			border-width:1px;

			border-style:solid;

			height:30px;

			width:100%;

		}

    </style>

    	<script type="text/javascript" src="JS/jquery-1.4.2.js"></script>

		<script src="JS/jquery-1.4.2-vsdoc.js" type="text/javascript"></script>

		<script  type="text/javascript">

			var AttrPage= function(){

				this.IsDrapDiv;

				//上一座标

				this.lastX;

				this.lastY;

				this.MoveTimer;

				//当前 座标

				this.CenterMouseX;

				this.CenterMouseY;



 				//作用：移动div。

				this.fPageMove=function (){

 					if(this.IsDrapDiv)							//是不是可以移动

 					{

 						if((this.CenterMouseX!=this.lastX )||( this.CenterMouseY!=this.lastY))

 						{

							$("#showMyInfo1").html(parseInt($("#showMyInfo1").html())+1);

	 						$("#showMyInfo2").html(this.CenterMouseX+":"+this.CenterMouseY);

 							$("#MainCardDiv").css("left",((parseInt($("#MainCardDiv").css("left"))+this.CenterMouseX - this.lastX)) + "px");

 							$("#MainCardDiv").css("top",((parseInt($("#MainCardDiv").css("top"))+this.CenterMouseY - this.lastY)) + "px");

 							this.lastX=this.CenterMouseX ;

							this.lastY=this.CenterMouseY ;

						}

 					}

				}

			};

			 // 默认值

			AttrPage.prototype.IsDrapDiv=false;

			AttrPage.prototype.lastX=0;

			AttrPage.prototype.lastY=0;

			AttrPage.prototype.CenterMouseX=0;

			AttrPage.prototype.CenterMouseY=0;

			//初始一个对象

			

		 $(function() {

				var AttrPageObj=new AttrPage();

				 $("#cardFirstRow").mousedown(function(ev) {

						//alert("down");

						 ev = ev || window.event;						// 事件

						 AttrPageObj.lastX=ev.clientX ;					//点下时的鼠标座标

						 AttrPageObj.lastY=ev.clientY ;

						 AttrPageObj.CenterMouseX=ev.clientX;

 						 AttrPageObj.CenterMouseY=ev.clientY;

						 AttrPageObj.IsDrapDiv=true;						//可以Move了

						 AttrPageObj.MoveTimer=setInterval(function(){

								AttrPageObj.fPageMove();

			 			 },100);			

 				});

 				$(document.body).mousemove(function(ev){

 				//计录位置

 						if(AttrPageObj.IsDrapDiv)

 						{			

 							ev = ev || window.event;

 							AttrPageObj.CenterMouseX=ev.clientX;

 							AttrPageObj.CenterMouseY=ev.clientY;

 							//$("#showMyInfo").html(parseInt($("#showMyInfo").html())+1);

 							//$("#showMyInfo").html(AttrPageObj.CenterMouseX+":"+AttrPageObj.CenterMouseY);

 							

 						}

		 		

 				}).mouseup(function(){

 				//停止 拖动状态

 					if(AttrPageObj.IsDrapDiv)//当 拖动状态 时

					{		

						AttrPageObj.fPageMove();	//先移位

						clearInterval(AttrPageObj.MoveTimer);

						AttrPageObj.MoveTimer=false;

						AttrPageObj.IsDrapDiv=false;				//停止Move了

						//alert("Up");

					}

 				});

		 });

		</script>

</head>

<body> 

    <form id="form1" runat="server">

    <div>

		<div  id="MainCardDiv"  grade="0" >

			<div id="cardFirstRow" >

			标题

				<div id="SmallAndCancel">

					<div id="cardDisplayMenu">▼</div>

					<div id="cardAutoMide">〓</div>

					<div id="cardCancel"><strong>X</strong></div>

				

				</div>

			</div>

			<div id="cardSecondRow" >2</div>

			<div id="cardThirdRow" >3</div>

			<div id="CardContentRows">content </div>

		

		</div>

		<div id="showMyInfo1">1</div>

		<div id="showMyInfo2">1</div>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

		

    </div>

    </form>

</body>

</html>

liyi7200128 2011-12-03

打赏
举报

能不能把div的mouseup改为整个页面的mouseup

hetengfei_ 2011-12-03

打赏
举报

没人有更好的方法吗？

hetengfei_ 2011-12-03

打赏
举报

问题，没了。
在此，
结贴了，

p2227 2011-12-02

打赏
举报

我见到一些现成的拖动div都是在拖动的时候只显示一个虚框，完成后再把dom真正移过去，这样大概会减少浏览器的渲染工作吧。不知道你的电脑配置还是浏览器（比如IE6什么的）的问题上面的方案能不能处理，或者再等看楼下会不会出现高手。

hetengfei_ 2011-12-02

打赏
举报

div 拖动时，如果 mousemove 函数还没有执行完毕，你的鼠标已移过 div 范围了。
此时你的mouse 突然 UP，但是我们用到div 的mouseup 作为取消拖动状态；
但（已移过 div 范围）那么此时的 mouse 突然 UP
因过了div范围就不会使得执行div的mouseup 来取消拖动状态。

ok？

hetengfei_ 2011-12-02

打赏
举报

[Quote=引用 6 楼 p2227 的回复:]
既然你说不行也没有关系，那说明你只关心在窗口里面的鼠标坐标。
既然在窗口里面，如果鼠标不移动，那鼠标坐标不变，setInterval 无意义。
如果鼠标动了，那……
[/Quote]
问题：做拖动div 的遇到的。
我想高手的你也做过吧。
那你可以会遇同我一样的问题，（电脑跟不上导致的Bug）
div 拖动时，发果 mousemove 函数还没有执行完毕，你的鼠标已移过 div 范围了。
此时你的mouse 突然 UP；
那你的div 现在还处的拖动状态，可是你的鼠标已径UP 了。这就是你的BUG！
我用 setInterval 就可以避免此bug ；

默默不得鱼 2011-12-02

打赏
举报

必须在事件里没其他办法只有通过event获得

p2227 2011-12-02

打赏
举报

[Quote=引用 5 楼 rao3324180 的回复:]

请问下面那种代码有什么用?
[/Quote]楼主想得到一种无论鼠标动不动，在哪里动都获得当前坐标的方法的意思。

p2227 2011-12-02

打赏
举报

[Quote=引用 4 楼 hetengfei_ 的回复:]

引用 3 楼 p2227 的回复:
好吧，原来是我没有看到“我要下面这种”这句话，不过如果鼠标不在浏览器窗口里面，你也要获得鼠标的坐标么

能就最好了，不行也没有关系的。
[/Quote]既然你说不行也没有关系，那说明你只关心在窗口里面的鼠标坐标。
既然在窗口里面，如果鼠标不移动，那鼠标坐标不变，setInterval 无意义。
如果鼠标动了，那引发mousemove，回到你的提示

所以结论是你另外遇到有问题，setInterval 只是一种半成品的解决你的问题的方案

我这边测试过，如果有iframe，光是提示的代码是不够，不知道你实际上是遇到了什么问题。

rao3324180 2011-12-02

打赏
举报

请问下面那种代码有什么用?

hetengfei_ 2011-12-02

打赏
举报

[Quote=引用 3 楼 p2227 的回复:]
好吧，原来是我没有看到“我要下面这种”这句话，不过如果鼠标不在浏览器窗口里面，你也要获得鼠标的坐标么
[/Quote]
能就最好了，不行也没有关系的。

p2227 2011-12-02

打赏
举报

好吧，原来是我没有看到“我要下面这种”这句话，不过如果鼠标不在浏览器窗口里面，你也要获得鼠标的坐标么

hetengfei_ 2011-12-02

打赏
举报

取鼠标座标的function 不在 mouse事件中。
在 setInterval () 里面的函数中来取得.
比如

var TimerGetPoint = setInterval    (function(ev){

  // 在这种地方 可能连 指南指 都没有用啊。

},100);

p2227 2011-12-02

打赏
举报

不可以运行？还是有什么问题？chrome下通过

<script>

document.onmousemove = function(ev) {

    ev = ev || window.event;        

    document.title="x:"+ev.clientX.toString()+"y:"+ev.clientY.toString()+";"

}  

</script>