mousedown(),mouseup()は、特定の要素上でマウスの
何かしらのボタン(左ボタン・右ボタン・中央ボタン等)が押されたり
話されたりしたときに、処理を実行します。
click()と似てますが、click()は特定の要素上にマウスカーソルが
ある状態で、左ボタンが押され、そのままボタンが離されたときに
処理が行われます。
mousedown(),mouseup()ば、ドラッグ&ドロップのような
操作を実現する場合に使用します。
mousedown()
この命令は、特定の要素上にマウスカーソルがある状態で、
マウスのボタンが押されたときに処理されます。
mouseup()
この命令は、特定の要素上にマウスカーソルがある状態で、
既に押されているマウスのボタンが話されたときに処理されます。
サンプルコードを実行すると分かりますが、
青い物体の上にカーソルを持っていきマウスの
ボタンを押すと、黄色になり、離すと青に戻るコードです。
dblclick()と同じように、a要素に対して
mousedown/mouseupイベントを設定する場合は、
return false;を設定したclick()をメソッドチェーンを
追加する必要があります。
実行結果はこちらです。
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 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQueryStudy</title> <style> *{margin:0;padding:0;} #container{ width:640px; height:400px; background-color:white; font-weight:100; margin:0 auto;} #box{ width:100px; height:100px; background-color:blue;} </style> <script src="js/jquery-1.11.3.js"></script> </head> <body> <div id="container"> <div id="box"></div> </div><!--contatiner--> <script> $(document).ready(function(){ $("#box").mousedown(function(){ $(this).css("background-color","yellow"); }); $("#box").mouseup(function(){ $(this).css("background-color","blue"); }); }); </script> </body> </html> |