ダブルクリックされたことを感知するdblclick()

2015年8月3日

特定の要素がダブルクリックされたときに、
何かしらの処理を実行したい場合は、
dblclick()を使用します。書き方はclick()と同様で、
function(){...}を書いて、その中に実行したい処理を書きます。

サンプルコードでは、ボタンがクリックされたら
白猫の画像を黒猫に切り替える処理をしています。

画像が切り替わった後、F12を押して、「Elements」タブで
HTMLを確認すると、src属性の値と、alt属性の値が変更されて
いることが家訓できます。

実行結果はこちらです。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQueryStudy</title>
    <style>
	*{margin:0;padding:0;}
	
    #container{
        width:640px;
        height:400px;
        font-weight:100;
        margin:0 auto;}
    li{margin:10px;}
    </style>        
    <script src="js/jquery-1.11.3.js"></script>  
    
</head>
<body>

<div id="container">
    <button>画像切替</button>
    <p><img src="shironeko.jpg" alt="白猫" width="100" height="100"></p>
</div><!--contatiner-->

<script>
$(document).ready(function(){

    $("button").dblclick(function(){
        $("img").attr("src","kuroneko.jpg").attr("alt","黒猫");
    });

});
</script>

</body>
</html>

<!doctype html>

<html>

<head>

<title>jQueryStudy</title>

<style>

*{margin:0;padding:0;}

#container{

width:640px;

height:400px;

font-weight:100;

margin:0 auto;}

li{margin:10px;}

</style>

</head>

<body>

</div>

$(document).ready(function(){

$("button").dblclick(function(){

$("img").attr("src","kuroneko.jpg").attr("alt","黒猫");

});

</script>

</body>

</html>

a要素に設定したdblclick()が動かないんだけど

a要素にclickイベントを設定するときは、
もともとのa要素のリンクの無効にするために、
click(function(){...})内の最後にreturn false;を書きました。

ですが、dblclick()の場合はreturn false;を書いても、
動作がうまくいきません。dblclick()に設定した処理は
ダブルクリックされたら、処理が実行されます。

一方、ユーザーがダブルクリックのつもりでクリックした
１回目のクリックの後にclickイベントを感知し、
a要素のリンクの処理が実行されてしまいます。

そこで、a要素にdblclick()を設定したい場合、
メソッドチェーンを使用して、click()とdblclick()の
両方にイベント処理を追加します。

dblclick()にはダブルクリック時に実行したい処理を、
click()にはreturn false;を設定すれば、１回目のクリック時の
リンクを無視できます。

↓こんな感じです。

    $("a").dblclick(function(){
        $("img").attr("src",$(this).attr("href"))
        .attr("alt",$(this).text());
    }).click(function(){
        return false;
    });

$("a").dblclick(function(){

$("img").attr("src",$(this).attr("href"))

.attr("alt",$(this).text());

}).click(function(){

return false;

});