by WebSurfer
2010年10月21日 21:59
マウスホイールを回すことによって発生するイベントを処置して、ブラウザ上に表示されたリストボックスの中のアイテムを選択する例を紹介します。
クライアント側だけの処置なので、ASP.NET はリストボックスなどの html を生成する以外にはあまり関係なく、マウスホイールのイベントの処置は、すべて JavaScript で行うことになります。
JavaScript の主要な部分は Mouse wheel programming in JavaScript というページからほぼ丸写しで、それにリストボックスの中のアイテムを選択するコードを追加しただけです。
だったら、そのページをリンクするだけでも済むのですが、将来リンク切れになると困るので自分のブログに書いておくことにしました。
コードは以下のとおりです。リストボックスにフォーカスを当てて、マウスホイールを回すと選択項目が変わるようになっています。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
<!--
// リストボックスの選択の操作
function handle(delta) {
if (document.activeElement.id == "myListBox") {
var ddl = document.getElementById("myListBox");
if (delta < 0) {
if (ddl.selectedIndex < ddl.options.length - 1) {
ddl.selectedIndex += 1;
}
} else {
if (ddl.selectedIndex > 0) {
ddl.selectedIndex -= 1;
}
}
}
}
// マウスホイールイベントのハンドラ
function wheel(event) {
var delta = 0;
if (!event) {
event = window.event; // IE の場合
}
if (event.wheelDelta) {
delta = event.wheelDelta / 120; // IE, Opera の場合
if (window.opera) {
delta = -delta; // Opera は符合 (+/-) が異なる
}
} else if (event.detail) {
// Mozilla は IE と符合 (+/-) が異なり、かつ
// multiple factor は 3 になる。
delta = -event.detail / 3;
}
// delta がゼロでなければハンドルする。
// delta が正なら scroll up、負なら scroll down
if (delta) {
handle(delta);
}
// マウスホイールのデフォルトアクションの防止
if (event.preventDefault) {
event.preventDefault();
}
event.returnValue = false;
}
// 初期化用のコード
if (window.addEventListener) {
// DOMMouseScroll は mozilla 用
window.addEventListener('DOMMouseScroll', wheel, false);
}
// IE/Opera 用
window.onmousewheel = document.onmousewheel = wheel;
//-->
</script>
</head>
<body>
<h3>マウスホイールで選択操作</h3>
<div>
<select id="myListBox" name="myListBox" size="10">
<option value="1">選択肢のサンプル1</option>
<option value="2">選択肢のサンプル2</option>
<option value="3">選択肢のサンプル3</option>
<option value="4">選択肢のサンプル4</option>
<option value="5">選択肢のサンプル5</option>
<option value="6">選択肢のサンプル6</option>
<option value="7">選択肢のサンプル7</option>
<option value="8">選択肢のサンプル8</option>
<option value="9">選択肢のサンプル9</option>
<option value="10">選択肢のサンプル10</option>
</select>
</div>
</body>
</html>
JavaScript のコードでフォーカスの当たっている DOM エレメントを取得するため、 document.activeElement を使用しています。これは以前は IE のみで有効だったのですが、最近は ここ に書いてあるように、Firefox やその他のブラウザでもサポート済みのようです。実際、IE8, Firefox 3.6.11, Safari 5.0.2, Chrome 6.0.472.63, Opera 10.63 で確認しましたが、サポートしていました。
------------ 2010/4/24 追記 ------------
この記事で紹介したコードを実際に動かして試せるよう 実験室 にアップしました。興味のある方は試してみてください。