マウスのボタン操作を感知する mousedown()/mouseup()

2015年8月3日

mousedown(),mouseup()は、特定の要素上でマウスの
何かしらのボタン(左ボタン・右ボタン・中央ボタン等)が押されたり
話されたりしたときに、処理を実行します。
click()と似てますが、click()は特定の要素上にマウスカーソルが
ある状態で、左ボタンが押され、そのままボタンが離されたときに
処理が行われます。

mousedown(),mouseup()ば、ドラッグ＆ドロップのような
操作を実現する場合に使用します。

mousedown()

この命令は、特定の要素上にマウスカーソルがある状態で、
マウスのボタンが押されたときに処理されます。

mouseup()

この命令は、特定の要素上にマウスカーソルがある状態で、
既に押されているマウスのボタンが話されたときに処理されます。

サンプルコードを実行すると分かりますが、
青い物体の上にカーソルを持っていきマウスの
ボタンを押すと、黄色になり、離すと青に戻るコードです。

dblclick()と同じように、a要素に対して
mousedown/mouseupイベントを設定する場合は、
return false;を設定したclick()をメソッドチェーンを
追加する必要があります。

実行結果はこちらです。

<!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>

<!doctype html>

<html>

<head>

<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>

</head>

<body>

</div>

$(document).ready(function(){

$("#box").mousedown(function(){

$(this).css("background-color","yellow");

});

$("#box").mouseup(function(){

$(this).css("background-color","blue");

});

</script>

</body>

</html>