クリックしたら、何かが起こる仕掛けはよく使われますが、ダブルクリックや右クリック(=コンテクストメニュー)でも発動させることが可能です。
マウスの場合、クリックは基本的に押して、離してから発動しますが、押された瞬間も検知可能です。
カーソルが要素の上を通過することも検知できます。
応用すると、押されて、動いて、離すと、マウスは「ドラッグ」、スマホだと「スワイプ」や「フリック」となります。
カーソルをここに合わせると実行します
上記の青い部分にマウスを合わせると、ブラウザの開発ツールのコンソールに、以下の記述が出力されます。
ソースはこちら
$(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('マウスが離れた瞬間'); }); });