jQuery でマウスのイベントを処理するには、$(function() {･･･}) 内でイベントリスナーを登録します。
マウス関連のイベントリスナー登録メソッドには、click や mousedown、mouseup、contextmenu などがあります。
- 目次 -
スポンサーリンク
デモ
以下の OK ボタン上でマウスを操作すると、イベントリスナーが呼び出され、テキストエリアに操作内容が出力されます。
ソース
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 |
<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script type="text/javascript"> function scroll(area) { area.scrollTop( area[0].scrollHeight ); } $(function(){ // click $('#button1').click(function () { $('#area1').append('click').append('\n'); scroll($('#area1')); }); // dblclick $('#button1').dblclick(function () { $('#area1').append('dblclick').append('\n'); scroll($('#area1')); }); // mousedown $('#button1').mousedown(function (e) { $('#area1').append('mousedown (' + e.which + ')').append('\n'); scroll($('#area1')); }); // mouseup $('#button1').mouseup(function () { $('#area1').append('mouseup').append('\n'); scroll($('#area1')); }); // mouseenter $('#button1').mouseenter(function () { $('#area1').append('mouseenter').append('\n'); scroll($('#area1')); }); // mouseleave $('#button1').mouseleave(function () { $('#area1').append('mouseleave').append('\n'); scroll($('#area1')); }); // mouseover $('#button1').mouseover(function () { $('#area1').append('mouseover').append('\n'); scroll($('#area1')); }); // mouseout $('#button1').mouseout(function () { $('#area1').append('mouseout').append('\n'); scroll($('#area1')); }); // hover $('#button1').hover( function () { $('#area1').append('hover (IN)').append('\n'); scroll($('#area1')); }, function () { $('#area1').append('hover (OUT)').append('\n'); scroll($('#area1')); }); // mousemove $('#button1').mousemove(function (e) { $('#area2').append('mousemovee X:' + e.offsetX + ' Y:' + e.offsetY).append('\n'); scroll($('#area2')); }); // contextmenu $('#button1').contextmenu(function () { $('#area1').append('contextmenu').append('\n'); scroll($('#area1')); }); // クリア ボタン $('#button_clr').click(function () { $('#area1').empty(); $('#area2').empty(); }); }); </script> </head> <body> <button id="button1" style="margin-left:40%;width:80px;height:50px;">OK</button> </br> <textarea id="area1" style="width:45%;height:250px;margin:20px 5px 0 5px;background-color: #FFFACD;font-size:14px;line-height:15px;"></textarea> <textarea id="area2" style="width:45%;height:250px;background-color: #FFFACD;font-size:14px;line-height:15px;"></textarea> </br> <button id="button_clr" style="margin-left:10px;"><span style="font-size:14px;">クリア</span></button> </body> </html> |
イベントリスナー登録用 メソッド
click
要素上でのクリック イベントのリスナーを登録します。
|
1 2 3 |
$('#button1').click(function () { console.log('click'); }); |
dblclick
要素上でのダブル・クリック イベントのリスナーを登録します。
|
1 2 3 |
$('#button1').dblclick(function () { console.log('dblclick'); }); |
mousedown
要素上でのマウスボタン押下 イベントのリスナーを登録します。
ボタンの左右を判定する場合、引数として event を受け取り、which を確認します。
|
1 2 3 |
$('#button1').mousedown(function (event) { console.log(event.which); }); |
which の値は 1、2、3 のいづれかで、以下を表しています。
- 1 : 左ボタン
- 2 : 中央ホイール
- 3 : 右ボタン
mouseup
要素上でのマウスボタン up イベントのリスナーを登録します。
|
1 2 3 |
$('#button1').mouseup(function () { console.log('mouseup'); }); |
mouseenter
要素上にマウスポインタが入ったときのイベント リスナーを登録します。
|
1 2 3 |
$('#button1').mouseenter(function () { console.log('mouseenter'); }); |
mouseleave
要素上からマウスポインタが出たときのイベント リスナーを登録します。
|
1 2 3 |
$('#button1').mouseleave(function () { console.log('mouseleave'); }); |
mouseover
要素上にマウスポインタが入ったときのイベント リスナーを登録します。
|
1 2 3 |
$('#button1').mouseover(function () { console.log('mouseover'); }); |
mouseout
要素上からマウスポインタが出たときのイベント リスナーを登録します。
|
1 2 3 |
$('#button1').mouseout(function () { console.log('mouseout'); }); |
mousemove
要素上でマウスポインタが動いたときのイベント リスナーを登録します。
マウスの位置を確認する場合、引数として event を受け取り、そこから以下の情報を取得します。
screenX、screenY
clientX、clientY
pageX、pageY
offsetX、offsetY
clientX、clientY
pageX、pageY
offsetX、offsetY
･･･ スクリーン全体での座標
･･･ ウィンドウ全体での座標
･･･ ページ全体での座標
･･･ 要素内での座標
･･･ ウィンドウ全体での座標
･･･ ページ全体での座標
･･･ 要素内での座標
たとえば、要素内でのマウスの位置を確認する場合は
|
1 2 3 |
$('#button1').mousemove(function (event) { console.log('X:' + event.offsetX + ' Y:' + event.offsetY); }); |
となります。
hover
要素上にマウスポインタが出入りしたときのイベント リスナーを登録します。
リスナーは 2 つ登録できます。1 つはマウスポインタが入ったとき、もう 1 つはマウスポインタが出たときのリスナーです。
|
1 2 3 4 5 6 7 8 |
$('#button1').hover( function () { console.log('IN'); }, function () { console.log('OUT'); } ); |
contextmenu
要素上での右クリック イベントのリスナーを登録します。
|
1 2 3 |
$('#button1').contextmenu(function () { console.log('contextmenu'); }); |