A Day in the Life

prototype.js with mousehweel event

http://rails2u.com/misc/wheel_event/
prototype.jsではイベントハンドラの登録をEvent.observeに追加することにより行えます。これはWinIEだとelement.attachEvent, Firefoxだとelement.addEventLisnerと登録用の関数が違う互換性を吸収してくれるので大変便利です。しかし、ホイールイベントは少々特殊なため、通常のEvent.observeでは上手く登録が行えません。
ホイールイベントをwebアプリケーションで上手く使うとユーザビリティの向上が見込める*1ので、簡単にホイールイベントを登録できるEvent.observeを作ってみました。上記URL先のwheel_event.jsをprototype.jsを読み込んだ後に読み込むことによって、mousewheelイベントを扱えるようになります。

Event.observe(element, 'mousewheel', function(element, wheel_count){
  wheel_count == 1 ? alert('wheel up') : alert('wheel down');
});

イベントハンドラの第二引数にホイールカウント(1 or -1)が入ってくるので、それに応じて処理を振り分けることができます。
確認ブラウザはWinIE6.0, Win Firefox 1.0.7(1.5でもたぶん動きます), safariです。ただsafariはイベントリスナーでmousewheelの登録がうまくできないようで、無理矢理行ってるために1要素1イベントしか登録できません。
またこのホイールイベント作成には、はてな使ったら負けかなと思っているさんに助言を頂きました。ありがとうございます。

event.preventDefault ?
  event.preventDefault() : (event.returnValue = false);

でブラウザのホイール自体を無効にできるtips、とか普通知りませんお!

*1:例: http://la.ma.la/blog/diary\_200510091310.htm

記事の一覧 >