マウスの動きに合わせてボックスを移動させる時の罠
研修の一環。
マウスイベントを取得して、ボックスを移動させたりフォントサイズを変えたりするページを作ってました。
http://dl.dropbox.com/u/2081567/HTML/chaser.html
ただ、これを作る過程で1つ躓いた点があったのでとりあえず記録。
注意：
Google Chromeでしかテストしていません。
その他のブラウザでの動作は考慮しないこととします。
（もちろん仕事ではこれを言ってはいけない）
本題。
簡単に言うと、「JSではボックスを動かすソースをしっかり書いてるのに、実際にブラウザで見てみると動かない」というものです。
まず、躓いてる時のソースです（一部抜粋）。
(HTML)
<div class="boxA" id="heee">
heee
</div>
(CSS)
.boxA {
width: 100px;
height: 100px;
background: #f66;
padding: 10px 10px 10px 10px;
}
(JavaScript)
function moveBox(e) {
var x = e.pageX;
var y = e.pageY;
var boxe = document.getElementById("heee");
boxe.style.left = x + "px";
boxe.style.top = y + "px";
}
window.onmousemove = moveBox;
window.captureEvents(Event.MOUSEMOVE);"boxA"というidを付けたボックスをマウスカーソルに追尾させようと思ったのですが、このままでは動きませんでした。
しばらくここで躓いてたのですが、色々調べたところ、CSSに原因があることが判明しました。
ボックスにはpositionというプロパティがあり、デフォルトではstaticが指定されています。
staticの場合、ボックスに指定するtopプロパティやleftプロパティが無効になります。
よって、このプロパティをstatic以外にする必要があります。
ということでCSSに追加したところ、しっかりマウスカーソルに追尾するようになりました。
.boxA {
position: absolute; /* これ付けないとtopとleftが適用されない */
width: 100px;
height: 100px;
background: #f66;
padding: 10px 10px 10px 10px;
}
例によってツッコミはご自由にどうぞ。
まだまだ躓くところはいっぱいあるもんですな・・・。
