こちらではjQueryのマウスイベントについて解説しています。
目次
- jQueryのマウスイベントに関するメソッド一覧
- .click(handler)
- .click()
- .contextmenu(handler)
- .contextmenu()
- .dblclick(handler)
- .dblclick()
- .hover(handlerIn, handlerOut)
- .mousedown(handler)
- .mousedown()
- .mouseenter(handler)
- .mouseenter()
- .mouseleave(handler)
- .mouseleave()
- .mousemove(handler)
- .mousemove()
- .mouseout(handler)
- .mouseout()
- .mouseover(handler)
- .mouseover()
- .mouseup(handler)
- .mouseup()
- .toggle(handler, handler [,handler])
jQueryのマウスイベントに関するメソッド一覧
引数 | 解説 |
---|---|
.click(handler) | クリックした時に発生するイベント |
.click() | クリックをトリガーする |
.contextmenu(handler) | 右クリックした時に発生するイベント |
.contextmenu() | コンテキストメニューをトリガーする |
.dblclick(handler) | ダブルクリックした時に発生するイベント |
.dblclick() | ダブルクリックをトリガーする |
.hover(handlerIn, handlerOut) | マウスポインタが要素に出入りするときに発生するイベント |
.mousedown(handler) | マウスダウンした時に発生するイベント |
.mousedown() | マウスダウンをトリガーする |
.mouseenter(handler) | マウスポインタが要素に入ったときに発生するイベント |
.mouseenter() | マウスエンターをトリガーする |
.mouseleave(handler) | マウスポインタが要素から出たときに発生するイベント |
.mouseleave() | マウスリーブをトリガーする |
.mousemove(handler) | マウスポインタが要素内を動いているときに発生するイベント |
.mousemove() | マウスムーブをトリガーする |
.mouseout(handler) | マウスポインタが要素から出たときに発生するイベント |
.mouseout() | マウスアウトをトリガーする |
.mouseover(handler) | マウスポインタが要素に入ったときに発生するイベント |
.mouseover() | マウスオーバーをトリガーする |
.mouseup(handler) | マウスボタンが離されたときに発生するイベント |
.mouseup() | マウスアップをトリガーする |
.toggle(handler, handler [,handler]) | マウスクリックで指定した関数を順番に実行する。jQuery 1.9で削除された。 |
.click(handler)
.on('click', handler)
のショートカットです。
.click( handler )
、.click([eventData], handler)
の形でイベントハンドラをJavaScriptのクリックイベントにバインドします。
.click(handler)の使い方
<div id="item1">
ここをクリック
</div>
上記のHTMLにおいて、次のJavaScriptを実行します。
$( "#item1" ).click(function() {
alert( "イベントハンドラが呼ばれました。" );
})
「ここをクリック」という部分をクリックすると、「イベントハンドラが呼ばれました。」というメッセージがアラートで表示されます。
.click()
.trigger('click')
のショートカットです。
.click()
の形でイベントをトリガーします。
.click()の使い方
<div id="item1">
ここをクリック
</div>
<div id="item2">
ここはクリックしません
</div>
上記のHTMLにおいて、次のJavaScriptを実行します。
$( "#item1" ).click(function() {
$('#item2').click();
});
$( "#item2" ).click(function() {
alert('イベントハンドラが呼ばれました');
});
「ここをクリック」という部分をクリックすると、「イベントハンドラが呼ばれました。」というメッセージがアラートで表示されます。
.click(handler)のサンプルと同じメッセージが表示されますが、内部の処理が異なっています。
まず「ここをクリック」という部分をクリックすると、item1
にバインドされたイベントハンドラが呼ばれ、item2
のクリックをトリガーします。
するとitem2
にバインドされたイベントハンドラが呼ばれてメッセージが表示されるようになっています。
.on('contextmenu', handler)
のショートカットです。
.contextmenu( handler )
、.contextmenu([eventData], handler)
の形でイベントハンドラをJavaScriptのコンテキストメニューイベントにバインドします。
.contextmenu(handler)の使い方
<div id="item1">
ここを右クリック
</div>
上記のHTMLにおいて、次のJavaScriptを実行します。
$( "#item1" ).contextmenu(function() {
alert('コンテキストメニューのハンドラがよばれました。');
});
「ここを右クリック」という部分を右クリックすると、「コンテキストメニューのハンドラがよばれました。」というメッセージがアラートで表示されます。
.trigger('contextmenu')
のショートカットです。
.contextmenu()
の形でイベントをトリガーします。
.contextmenu()の使い方
<div id="item1">
ここを右クリック
</div>
<div id="item2">
ここは右クリックしません
</div>
上記のHTMLにおいて、次のJavaScriptを実行します。
$( "#item1" ).contextmenu(function() {
$('#item2').contextmenu();
});
$( "#item2" ).contextmenu(function() {
alert('イベントハンドラが呼ばれました');
});
「ここを右クリック」という部分を右クリックすると、「コンテキストメニューのハンドラがよばれました。」というメッセージがアラートで表示されます。
.contextmenu(handler)のサンプルと同じメッセージが表示されますが、内部の処理が異なっています。
まず「ここを右クリック」という部分をクリックすると、item1
にバインドされたイベントハンドラが呼ばれ、item2
のクリックをトリガーします。
するとitem2
にバインドされたイベントハンドラが呼ばれてメッセージが表示されるようになっています。
.dblclick(handler)
.on('dblclick', handler)
のショートカットです。
.dblclick( handler )
、.dblclick([eventData], handler)
の形でイベントハンドラをJavaScriptのダブルクリックイベントにバインドします。
使い方は、バインドするイベントがdblclick
になるだけで.click(handler)
とほぼ同じです。
.dblclick()
.trigger('dblclick')
のショートカットです。
.dblclick()
の形でイベントをトリガーします。
使い方は、トリガーするイベントがdblclick
になるだけで.trigger('click')
とほぼ同じです。
.hover(handlerIn, handlerOut)
$(selector).mouseenter(handlerIn).mouseleave(handlerOut);
のショートカットです。
2つのハンドラをmouseenter
とmouseleave
のイベントにバインドします。
このメソッドを使うことで、マウスが要素内にあるときだけ動作を適用させることができます。
.hover(handlerIn, handlerOut)の使い方
<ul>
<li>りんご</li>
<li>みかん</li>
<li>メロン</li>
</ul>
上記のHTMLにおいて、次のJavaScriptを実行します。
$( "li" ).hover(
function() { $(this).css('color', 'red'); },
function() { $(this).css('color', 'black'); }
);
すると、リスト要素の上にマウスポインタがあるときは文字が赤色になり、要素から外れると文字が黒色になります。
.mousedown(handler)
.on('mousedown', handler)
のショートカットです。
.mousedown( handler )
、.mousedown([eventData], handler)
の形でイベントハンドラをJavaScriptのクリックイベントにバインドします。
クリックとマウスダウンとの違いは、クリックはマウスを押して離したときに発生しますが、マウスダウンは押した瞬間に発生します。
それ以外の使い方は、バインドするイベントがmousedownになるだけで.click(handler)とほぼ同じです。
.mousedown()
.trigger('mousedown')
のショートカットです。
.mousedown()
の形でイベントをトリガーします。
使い方は、トリガーするイベントがmousedownになるだけで.trigger(‘click’)とほぼ同じです。
.mouseenter(handler)
.on(‘mouseenter’, handler)のショートカットです。
.mouseenter(handler)
、.mouseenter([eventData], handler)
の形でイベントハンドラをJavaScriptのマウスエンターイベントにバインドします。
.mouseenter()
.trigger('mouseenter')
のショートカットです。
.mouseenter()
の形でイベントをトリガーします。
.mouseleave(handler)
.on(‘mouseleave’, handler)のショートカットです。
.mouseleave(handler)
、.mouseleave([eventData], handler)
の形でイベントハンドラをJavaScriptのマウスリーブイベントにバインドします。
.mouseleave()
.trigger('mouseleave')
のショートカットです。
.mouseleave()
の形でイベントをトリガーします。
.mousemove(handler)
.on('mousemove', handler)
のショートカットです。
.mousemove(handler)
、.mousemove([eventData], handler)
の形でイベントハンドラをJavaScriptのマウスムーブイベントにバインドします。
mousemove
は、マウスポインタが要素内を動いているときに発生するイベントです。
.mousemove()
.trigger('mousemove')
のショートカットです。
.mousemove()
の形でマウスムーブイベントをトリガーします。
.mouseout(handler)
.on('mouseout', handler)
のショートカットです。
.mouseout( handler )
、.mouseout([eventData], handler)
の形でイベントハンドラをJavaScriptのクリックイベントにバインドします。
mouseout
は、マウスポインタが要素から出たときに発生するイベントです。
.mouseout()
.trigger('mouseout')
のショートカットです。
.mouseout()
の形でイベントをトリガーします。
.mouseover(handler)
.on('mouseover', handler)
のショートカットです。
.mouseover( handler )
、.mouseover([eventData], handler)
の形でイベントハンドラをJavaScriptのクリックイベントにバインドします。
mouseover
は、マウスポインタが要素に入ったときに発生するイベントです。
.mouseover()
.trigger('mouseover')
のショートカットです。
.mouseover()
の形でイベントをトリガーします。
.mouseup(handler)
.on('mouseup', handler)
のショートカットです。
.mouseup( handler )
、.mouseup([eventData], handler)
の形でイベントハンドラをJavaScriptのクリックイベントにバインドします。
mouseup
は、マウスボタンが離されたときに発生するイベントです。
.mouseup()
.trigger('mouseup')
のショートカットです。
.mouseup()
の形でイベントをトリガーします。
.toggle(handler, handler [,handler])
2つ以上のハンドラをマッチした要素にバインドし、クリックの度に実行します。
jQuery 1.9で削除されました。
[prism]