onmousedown属性 onmousemove属性 onmouseup属性

Updated 2013.10.17 / Published 2005.10.02

onmousedown属性, onmousemove属性, onmouseup属性の3つのイベント属性（イベントハンドラ）によりポインティングデバイス（pointing device）の全ての動作に対して起動するイベントを指定することができます。onmousedown属性はマウスやノートパソコン等に付属しているトラックパッドなどのポインティングデバイスの左右を問わずボタンが押されたときに起動するスクリプトを指定します。onmousemove属性はポインティングデバイスのカーソル（ポインタ）が移動したときに起動するスクリプトを指定します。onmouseup属性はポインティングデバイスの左右を問わずボタンが押されて放されたときに起動するスクリプトを指定します。onmousedown属性, onmousemove属性, onmouseup属性はすべてポインティングデバイスが操作できない環境では、無効なので注意してください。

onmousemove属性のように当該要素の上でのカーソル（ポインタ）の動作によりイベントを発生させる属性に、onmouseover属性, onmouseout属性があります。これらの属性をひとつの同じ要素に併せて指定している場合、イベントは onmouseover→onmousemove→onmouseout の順に発生します。onmouseover属性と onmousemove属性のイベントが発生する動作は異なり、onmouseover属性は当該要素内にカーソルが入ったときに一度だけ発生し、その後要素内で動かしているだけではイベントは起こらず、要素内にカーソルを出入りさせると再びイベントが発生します。これに対して、onmousemove属性は要素内でカーソルを少しでも動かすと、その度にイベントが発生します。

また、onmousedown属性, onmouseup属性はポインティングデバイスの左右ボタンの動作を問いませんが、左ボタンに限定された動作によりイベントを発生させる属性に、onclick属性と ondblclick属性があります。これらの属性をひとつの同じ要素に併せて指定している場合、左ボタンを2回連続で押す動作を行うと、Firefox, Opera, Chrome, Safari は仕様準拠通りの onmousedown→onmouseup→onclick→onmousedown→onmouseup→ondblclick の順にイベントが発生します。Internet Explorer のみイベント発生順序が異なり、onmousedown→onmouseup→onclick→onmousedown→ondblclick→onmouseup の不規則な順でイベントが発生します。どの UA においても2回連続でボタンを押した時の2回目の onclick属性のイベントは無効になるようです。

バージョン

HTML4.01(S,T,F)
XHTML1.0(S,T,F)
XHTML1.1

必須

非推奨

属性値

スクリプト

onmousedown属性 onmousemove属性 onmouseup属性を指定できる要素型

A

B

C

D

E

F

H

h1-h6
hr

I

K

L

M

N

O

P

Q

R

S

T

U

V

onmousedown属性 onmousemove属性 onmouseup属性のサンプル

次のスクリプトでは「Start&Stop」の部分をポインティングデバイスの左右いずれかのボタンで押下している間だけ、onmousedown属性のイベントによるストップウォッチが作動します。そして、押されていたボタンが放されると、onmouseup属性のイベントが発生し、ストップウォッチのタイマーが止まります。「Reset」の部分でポインティングデバイスが動くとストップウォッチをリセットします。

<script type="text/javascript">
var stime, ntime;
var min, sec, cen, xmin, xsec, xcen;
var fStart, active, interval , fStop;
xmin=0; xsec=0; xcen=0; fStop=1;
function timerstart(){
if (fStop==1) {
fStart=new Date();
stime=fStart.getTime()-(xmin*60000+xsec*1000+xcen*10);
count();
fStop=0;
}
}
function count() {
interval=setTimeout("count()",10);
active=new Date();
ntime=active.getTime();
min=Math.floor((ntime-stime)/60000);
sec=Math.floor(((ntime-stime)%60000)/1000);
cen=Math.floor((((ntime-stime)%60000)%1000)/10);
document.timer.m.value=min;
document.timer.s.value=sec;
document.timer.c.value=cen;
}
function timerstop(x) {
clearTimeout(interval);
xmin=eval(x.m.value);
xsec=eval(x.s.value);
xcen=eval(x.c.value);
fStop=1;
}
function timerclear() {
clearTimeout(interval);
xmin=0; xsec=0; xcen=0;
document.timer.m.value="0";
document.timer.s.value="0";
document.timer.c.value="0";
fStop=1;
}
</script>
.....
<form name="timer">
<p><input type="button" value="Start&amp;Stop"
onmousedown="timerstart()" onmouseup="timerstop(this.form)">
<input type="button" value="Reset" onmousemove="timerclear()">
</p><p>
<input size="2" name="m" value="0">分
<input size="2" name="s" value="0">秒
<input size="2" name="c" value="0">
</p>
</form>