JavaScriptでイベントによるスクロールを無効化する
今回は備忘録です。
例のTwitterのクライアント開発の途中です。
タイムラインを実装中、キーボードで項目を操作できるようにしたのですが、キーボードの上下入力によってスクロールされてしまい都合よく動作してくれませんでした。
そこで探してみると、こんな記事を発見。
この記事ではマウスホイールによるスクロールを無効化しています。
そこでこれをキーボードのイベントに。
[code.high.num]
$(window).keydown(function(event) {
if (event.preventDefault) {
event.preventDefault();
}
event.returnValue = false;
});
jQueryでonkeydownイベントを動的に追加しています。
キーワードとなってるのがこのpreventDefault。
（returnValueはIE用です。今回IEは関係ないので取っちゃいます。）
調べてるとこんなこんなメソッドがあったとは・・・。
event.preventDefault() jQuery API Documentation
Description: If this method is called, the default action of the event will not be triggered.
このメソッドが呼ばれた時、デフォルトのアクションは実行されません。
上のapi.jQuery.comでの例では、リンクをクリックしたらページ移動が起こるところ、それをキャンセルさせて、動的に追加したメソッドを実行しているという感じです。
スクロールの動作もブラウザのデフォルトのアクションとしてjavascriptから抑制できるみたいですね。
他にも調べてみると、こんなものが。
event.stopPropagation() jQuery API Documentation
Description: Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
イベント伝播 という概念があって、DOMの階層の順番にイベントが発生してアクションが起こるフローのことをいいます。
このメソッドはそのフローを途中で止めてそれ以上実行されないようにするメソッドのようです。
調べるときりがないですね・・・。
とりあえず、これで意図しないスクロールはなくなりました。めでたし。
それと、なぜか$(window).keypressでkeycodeが取れませんでした。なんでだろう。
blog comments powered by Disqus