首页 > 代码库 > 设计一个含有一个表单的页面,并且在表单上放入一个文本框。编写程序,当鼠标在页面上移动时,鼠标的坐标将显示在这个文本框中。

设计一个含有一个表单的页面,并且在表单上放入一个文本框。编写程序,当鼠标在页面上移动时,鼠标的坐标将显示在这个文本框中。

<form id="form1">
<P><INPUT type="text" name="txtMousePosition" size="20"></P>
</form>

 

<script type="text/javascript">
document.onmousemove =function() { //当鼠标移动式获取当前x,y坐标值
var x = window.event.clientX;
var y = window.event.clientY;
form1.txtMousePosition.value = http://www.mamicode.com/x+","+y;
}
</script>

程序说明:

clientX、clientY 发生事件时鼠标在客户区的坐标;screenX、screenY 发生事件时鼠标在屏幕上的坐标;offsetX、offsetY 发生事件时鼠标相对于事件源(比如点击按钮时触发onclick)的坐标。

window.event是非常重要的属性,用来获得发生事件时的信息,事件不局限于window对象的事件,所有元素的事件都可以通过event属性取到相关信息。

设计一个含有一个表单的页面,并且在表单上放入一个文本框。编写程序,当鼠标在页面上移动时,鼠标的坐标将显示在这个文本框中。