html怎么捕捉鼠标,动态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)

}

}

现在要建立与鼠标事件有关的链接：

onMouseDown="block.active=true;slide();return false;"

onMouseUp="block.active=false"

onMouseOut="block.active=false">move

“onMouseDown”设定活动变量为“true”，然后调用“slide()”函数来开始动画。当把鼠标键释放时，动画将停止，执行“onMouseUp”指针中的内容。活动变量此时为“false”

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

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

Mouse Click Animation

按下面的链接使对象移动

onMouseDown="block.active=true;slide();return false;"

onMouseUp="block.active=false"

onMouseOut="block.active=false">移动