昨日つまづいたのでメモ。 特定の要素内にマウスが乗ってる時だけキー入力を受け付けたい、そんな場面に出くわしました。もっと具体的には・・・まず、ページ構成として入力エリアと選択エリアの二分されている状態を想像してください。入力エリアではフォームが幾つか配置されていて、選択エリアではアイテムがタブキーの入力で動的に変更されるように設計されていたとします。この時何の工夫もしていなければ、タブキーを押すとフォーカスがフォームを移動すると同時に選択エリアが更新されてしまう場合があります。これはユーザーが意図しない挙動で、入力エリアと選択エリアでタブキーの役割を変更するべきだと考えられます。 前置きが長くなりましたが、要は、マウスが乗ってる状態とキー入力のイベントをペアで制御したいということになります。 これを実現するためにやるべきことは、大きく分けて 2 つになります。 keydownイベントで実行する関数本体を作る mouseoverイベントでkeydownイベントに1.をバインドする (mouseoutでunbind) 具体的なサンプルコードは以下のようになります。 <html> <head> <script type = "text/javascript" src = "./jquery-1.7.1.min.js" ></script> <script type = "text/javascript" > $ ( function () { $ ( "div" ). css ( "background-color" , "#C0C0C0" ); function displayKeycode ( event ) { $ ( "div" ). text ( event . keyCode ); } $ ( "div" ). mouseover ( function () {