动态HTML创作之四(捕捉鼠标事件)
与捕捉键盘相似，我们以使用鼠标来开始任何动画。下面的这个例子将建立一个超级链接，当把鼠标在上面按下时，对象移动，当释放鼠标键时，对象停止移动。

看来这段代码没有什么新的内容。我们仍然需要一个活动变量和让对象移动的函数：

function init() {
if(ns4) block=document.blockDiv
if(ie4) block=blockDiv.style
block.xpos=parseInt(block.left)
block.active=false
}

function slide() {
if(block.active) {
block.xpos+=5
block.left=block.xpos
setTimeout("slide()",30)
}
}
现在要建立与鼠标事件有关的链接：

<a href="javascript:void(null)"
onMouseDown="block.active=true;slide();return false;"
onMouseUp="block.active=false"
onMouseOut="block.active=false">move</a>
“onMouseDown”设定活动变量为“true”，然后调用“slide()”函数来开始动画。当把鼠标键释放时，动画将停止，执行“onMouseUp”指针中的内容。活动变量此时为“false”

“onMouseOut”也把活动变量设为“false”以防出错。因为如果把鼠标移开链接后再释放按钮，动画不会停止，因为鼠标“onMouseUp”事件没有发生在链接上。但是如果在代码中加入了“onMouseOut”语句，这个漏洞就可以弥补。

下面是以上所述整个例子的详细代码：

<HTML>

<HEAD>
<TITLE>Mouse Click Animation</TITLE>
<script language="javascript">
<!--

ns4=(document.layers)?true:false
ie4=(document.all)?true:false

function init() {
if(ns4) block=document.blockDiv
if(ie4) block=blockDiv.style
block.xpos=parseInt(block.left)
block.active=false
}

function slide() {
if(block.active) {
block.xpos+=5
block.left=block.xpos
setTimeout("slide()",30)
}
}

//-->
</script>
</HEAD>

<BODY onLoad="init()">
<p>按下面的链接使对象移动
<br>
<a href="javascript:void(null)"
onMouseDown="block.active=true;slide();return false;"
onMouseUp="block.active=false"
onMouseOut="block.active=false">移动</a>
</p>
<div id="blockDiv" style="position:absolute;left:50;top:100;width:30">
<img src="../image/block.gif">
</div>
</BODY>
</HTML>