<script> var isDraging=false; var ox,oy; function fnDown(){ isDraging=true; ox=event.offsetX; oy=event.offsetY; mid.setCapture(); } function fnMove(){ if(event.button!=1) fnRelease(); if(isDraging){ var th=event.y-oTable.offsetTop-oy; if (th<1) th=1; if(th+parseInt(mid.height)>parseInt(oTable.height)) th=parseInt(oTable.height)-parseInt(mid.height); up.height=th; } } function fnUp(){ fnRelease(); } function fnRelease(){ isDraging=false; mid.releaseCapture(); } </script> <BODY> <TABLE id=oTable width=200 height=250 border=1 cellspacing="0" cellpadding="0" > <TR> <TD id=up bgColor=#330099></TD></TR> <TR> <TD id=mid height=40 bgColor=#3366CC onmousedown="fnDown()" onmousemove="fnMove()" onmouseup="fnUp"></TD></TR> <TR> <TD id=down bgColor=#330099></TD></TR> </TABLE> </BODY>
<BODY onload="oOwnCapture.setCapture()" onclick="document.releaseCapture()"> <DIV ID=oOwnCapture onmousemove="oWriteLocation.value = event.x + event.y"; onlosecapture="alert(event.srcElement.id + ' lost mouse capture.')"> <P>Mouse capture has been set to this gray division (DIV) at load time using the setCapture method. The text area will track the mousemove event through the <B>x</B> and <B>y</B> properties of the event object.<BR> <P>Event bubbling works as usual on objects within a container that has mouse capture. Demonstrate this concept by clicking the button below or changing the active window from this one, and then back. After oOwnCapture loses mouse capture, the text area continues tracking the mousemove events only while the cursor is over objects it contains.</P> <BR><BR> <TEXTAREA ID=oWriteLocation COLS=2> mouse location</TEXTAREA> </DIV> <HR> <DIV ID=oNoCapture> <P>This white division is here to illustrate that mousemove events over objects it contains are captured on the gray division, oOwnCapture. <P>Click this text and check mouse coordinates captured in the text area within the division above.</P> <INPUT VALUE="Move mouse over this object."> <INPUT TYPE=button VALUE="Click to End Mouse Capture"> </DIV> </BODY>
var isDraging=false;
var ox,oy;
function fnDown(){
isDraging=true;
ox=event.offsetX;
oy=event.offsetY;
mid.setCapture();
}
function fnMove(){
if(event.button!=1)
fnRelease();
if(isDraging){
var th=event.y-oTable.offsetTop-oy;
if (th<1) th=1;
if(th+parseInt(mid.height)>parseInt(oTable.height))
th=parseInt(oTable.height)-parseInt(mid.height);
up.height=th;
}
}
function fnUp(){
fnRelease();
}
function fnRelease(){
isDraging=false;
mid.releaseCapture();
}
</script>
<BODY>
<TABLE id=oTable width=200 height=250 border=1 cellspacing="0" cellpadding="0" >
<TR> <TD id=up bgColor=#330099></TD></TR>
<TR> <TD id=mid height=40 bgColor=#3366CC onmousedown="fnDown()" onmousemove="fnMove()" onmouseup="fnUp"></TD></TR>
<TR> <TD id=down bgColor=#330099></TD></TR>
</TABLE>
</BODY>
onclick="document.releaseCapture()">
<DIV ID=oOwnCapture
onmousemove="oWriteLocation.value = event.x + event.y";
onlosecapture="alert(event.srcElement.id +
' lost mouse capture.')">
<P>Mouse capture has been set to this gray division (DIV)
at load time using the setCapture method. The text area will
track the mousemove event through the <B>x</B>
and <B>y</B> properties of the event object.<BR>
<P>Event bubbling works as usual on objects within a
container that has mouse capture. Demonstrate this concept by
clicking the button below or changing the active window from
this one, and then back. After oOwnCapture loses mouse capture,
the text area continues tracking the mousemove events only
while the cursor is over objects it contains.</P>
<BR><BR>
<TEXTAREA ID=oWriteLocation COLS=2>
mouse location</TEXTAREA>
</DIV>
<HR>
<DIV ID=oNoCapture>
<P>This white division is here to illustrate that mousemove
events over objects it contains are captured on the gray
division, oOwnCapture.
<P>Click this text and check mouse coordinates captured in
the text area within the division above.</P>
<INPUT VALUE="Move mouse over this object.">
<INPUT TYPE=button VALUE="Click to End Mouse Capture">
</DIV>
</BODY>
releasecapture取消