エレメントを操作する (4/5)
作成:2010-04-02 20:10
更新:2010-05-11 19:05
更新:2010-05-11 19:05
■マウス関連イベントによる操作
HTMLのタグには、ユーザーの操作に関連するイベント属性というのがいろいろと用意されています。例えば、マウス関連のイベントです。これは以下のようなものがあります。
onmouseover――マウスがエレメント内にはいった。
onmouseout――マウスがエレメント外に出た。
onmousedown――マウスボタンが押し下げられた。
onmouseup――マウスボタンが離された。
onmousemove――マウスがエレメント上を移動した。
これらのうち、onmousemove以外は、それぞれの操作時に１度だけ発生します。mousemoveは、マウスポインタが移動している間、繰り返し発生し続けます。これらを組み合わせることで、エレメントをマウスで操作できるようになります。
マウス関連イベントの利用例を下のリストに掲載しておきます。これは、マウスでドラッグできるエレメントのサンプルです。マウスでドラッグし動かすには、onmousemoveを利用すればいいのですが、そのためには２つほど考えなければならないことがあります。
１．ドラッグのチェック
マウスがただ移動しているのと、ドラッグしているのと、どう見分けるか。onmousemoveのイベントは、マウスボタンが押されているかどうかに関わらず発生します。そこで、「今はドラッグ中かどうか（つまり、マウスボタンが押されているか）」をチェックする仕組みが必要になります。
ここでは、onmousedownとonmouseupを使って、それを実現しています。onmousedownで変数mousedownにtrueを設定し、onmouseupでfalseを設定していますね。つまり、このmousedownという変数をチェックすれば、マウスボタンが押されているかどうかわかる、というわけです。
２．マウスポインタの位置の取得
マウスでドラッグする場合、「マウスポインタの位置」がわからないとエレメントの位置を変更できません。これは、マウス関連のeventオブジェクトを利用します。これは、前回、登場しましたね。イベントが発生すると、そのイベントに関する情報をまとめたeventというオブジェクトが生成されました。これを使うことで、マウスポインタの位置がわかります。
イベント関連の属性と設定されている関数をよく見ると、onmousemove="doMove(event);"というように、onmousemoveで呼び出される関数に「event」という引数が設定されていることがわかるでしょう。これで、発生したイベントのeventオブジェクトが引数で渡されます。
doMove関数では、渡されたeventオブジェクトから「clientX」「clientY」というプロパティの値を取り出しています。これらは、イベントが発生した時のマウスポインタの横・縦の位置を、表示されているクライアントのエリア内（要するにブラウザに表示されているドキュメント）の相対位置として表した値です。これで、マウスポインタの位置がわかりますから、これをもとにエレメントのleft/topを変更すれば、マウスポインタの位置にあわせてエレメントを移動させることができます。
onmouseover――マウスがエレメント内にはいった。
onmouseout――マウスがエレメント外に出た。
onmousedown――マウスボタンが押し下げられた。
onmouseup――マウスボタンが離された。
onmousemove――マウスがエレメント上を移動した。
これらのうち、onmousemove以外は、それぞれの操作時に１度だけ発生します。mousemoveは、マウスポインタが移動している間、繰り返し発生し続けます。これらを組み合わせることで、エレメントをマウスで操作できるようになります。
※利用例
マウス関連イベントの利用例を下のリストに掲載しておきます。これは、マウスでドラッグできるエレメントのサンプルです。マウスでドラッグし動かすには、onmousemoveを利用すればいいのですが、そのためには２つほど考えなければならないことがあります。
１．ドラッグのチェック
マウスがただ移動しているのと、ドラッグしているのと、どう見分けるか。onmousemoveのイベントは、マウスボタンが押されているかどうかに関わらず発生します。そこで、「今はドラッグ中かどうか（つまり、マウスボタンが押されているか）」をチェックする仕組みが必要になります。
ここでは、onmousedownとonmouseupを使って、それを実現しています。onmousedownで変数mousedownにtrueを設定し、onmouseupでfalseを設定していますね。つまり、このmousedownという変数をチェックすれば、マウスボタンが押されているかどうかわかる、というわけです。
２．マウスポインタの位置の取得
マウスでドラッグする場合、「マウスポインタの位置」がわからないとエレメントの位置を変更できません。これは、マウス関連のeventオブジェクトを利用します。これは、前回、登場しましたね。イベントが発生すると、そのイベントに関する情報をまとめたeventというオブジェクトが生成されました。これを使うことで、マウスポインタの位置がわかります。
イベント関連の属性と設定されている関数をよく見ると、onmousemove="doMove(event);"というように、onmousemoveで呼び出される関数に「event」という引数が設定されていることがわかるでしょう。これで、発生したイベントのeventオブジェクトが引数で渡されます。
doMove関数では、渡されたeventオブジェクトから「clientX」「clientY」というプロパティの値を取り出しています。これらは、イベントが発生した時のマウスポインタの横・縦の位置を、表示されているクライアントのエリア内（要するにブラウザに表示されているドキュメント）の相対位置として表した値です。これで、マウスポインタの位置がわかりますから、これをもとにエレメントのleft/topを変更すれば、マウスポインタの位置にあわせてエレメントを移動させることができます。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
<html>
<head>
<script type="text/javascript">
<!--
var mousedown = false;
function initial(){
var target = document.getElementById("target");
target.style.background = "red";
target.style.position = "absolute";
target.style.width = "100px";
target.style.height = "100px";
target.style.top = "100px";
target.style.left = "100px";
}
function doDown(){
mousedown = true;
}
function doUp(){
mousedown = false;
}
function doMove(event){
if (mousedown){
var w = event.clientX;
var h = event.clientY;
var target = document.getElementById("target");
target.style.left = w - 50;
target.style.top = h - 50;
}
}
//-->
</script>
</head>
<body onload="initial();">
<H1>TEST.</H1>
<div id="target"
onmousedown="doDown();"
onmouseup="doUp();"
onmousemove="doMove(event);">※位置・大きさの変更</div>
</body>
</html>
※関連コンテンツ
「初心者のためのJavaScriptプログラミング入門」に戻る