前の記事 ≪:ブラウザ上で動作する端末、WebTTY
次の記事 ≫:Yahoo UI Libraryを拡張した超リッチなコンポーネント集

マウスホイールイベント取得用のprototype.js拡張サンプル

2006年11月29日-はてなブックマーク

スポンサード リンク

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.jsEvent.observeで行います。

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

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

関連エントリ

関連の記事検索:JavaScript, prototype.js, ライブラリ, Ajax, prototype, ホイール
スポンサード リンク

By.KJ : 2006年11月29日 22:00 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)