Mouse Wheel

マウスホイールイベント取得用のprototype.js拡張サンプル。
標準のprototype.jsを使っても、マウスホイールイベントを簡単に取ることは出来ません。

ということで、prototype.js用の機能を拡張するJavaScriptコードのサンプルが公開されてます。



次のコードをwheel.jsなんかで保存してprototype.jsと一緒に読み込むと、Event.Observeにmousewheelが使えるようになります。

Object.extend(Event, {
  wheel:function (event){
    var delta = 0;
    if (!event) event = window.event;
    if (event.wheelDelta) {
      delta = event.wheelDelta/120;
      if (window.opera) delta = -delta;
    } else if (event.detail) { delta = -event.detail/3; } 
    return Math.round(delta); //Safari Round
  }
});

イベントハンドラの付与は、次のように、prototype.jsのEvent.observeで行います。

Event.Observe(document, "mousewheel", function (e) {
    alert( Event.wheel(e) ); // マウスホイール回転時の処理
}, false);

是非とも、標準で組み込まれて欲しい機能ですね。

関連エントリ

• マウスホイールイベントを検出