定番
履歴

jQuery マウスのトリガーいろいろ

jQuery マウスのトリガーいろいろ
マウスの動きで発動させる場合によく使われる記述を一部列挙しておきます。

クリックしたら、何かが起こる仕掛けはよく使われますが、ダブルクリックや右クリック(=コンテクストメニュー)でも発動させることが可能です。

マウスの場合、クリックは基本的に押して、離してから発動しますが、押された瞬間も検知可能です。

カーソルが要素の上を通過することも検知できます。

応用すると、押されて、動いて、離すと、マウスは「ドラッグ」、スマホだと「スワイプ」や「フリック」となります。

カーソルをここに合わせると実行します

上記の青い部分にマウスを合わせると、ブラウザの開発ツールのコンソールに、以下の記述が出力されます。

ソースはこちら

$(function(){
	$('#hoge').on('click', function(e) {
		console.log('クリック');
	});

	$('#hoge').on('dblclick', function(e) {
		console.log('ダブルクリック');
	});

	$('#hoge').on('contextmenu', function(e) {
		console.log('右クリック');
	});

	$('#hoge').on('mousedown', function(e) {
		console.log('マウスが押された瞬間');
	});

	$('#hoge').on('mousemove', function(e) {
		console.log('ドラッグされた');
	});

	$('#hoge').on('mouseup', function(e) {
		console.log('マウスが離れた瞬間');
	});
});
2018-06-03 22:33:34
このページの二次元コード

関連するサンプル

人気記事ランキング

© 2018 kipure
Top