WebSurfer's Home

トップ > Blog 1   |   Login
Filter by APML

マウスホイールでの操作

by WebSurfer 21. October 2010 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 追記 ------------

この記事で紹介したコードを実際に動かして試せるよう 実験室 にアップしました。興味のある方は試してみてください。

Tags:

JavaScript

About this blog

2010年5月にこのブログを立ち上げました。その後 ブログ2 を追加し、ここは ASP.NET 関係のトピックス、ブログ2はそれ以外のトピックスに分けました。

Calendar

<<  June 2021  >>
MoTuWeThFrSaSu
31123456
78910111213
14151617181920
21222324252627
2829301234
567891011

View posts in large calendar