jQueryで二回クリックを禁止する。

お世話になっています。
またもや、質問です。今回なんですが、こんなコードを書いてみました。
JS

$(".picture_click").click(function(){
		var $copy = $(this).clone();
		var $font = $(this).children(".member_picture_font").clone();
		$("#picture_append").append($copy);
		$("#picture_append .member_picture_font").empty();
		$("#member_coment").append($font);
		$("#member_coment .name_font").css("font-size","36px");
		$("#member_coment .from_font").css("font-size","25px");
		$("#member_coment .coment_font").css("font-size","18px");
		setTimeout(function(){
			$("#backcolor_brack").animate({
				opacity:0.8,
				zIndex:100000000000000000000000,
			},1000);
		},500);
		setTimeout(function(){
			$("#backcolor_brack").animate({
				width:'100%',
				minWidth:"1075px",
			},800);
		},1500);
		setTimeout(function(){
			$("#base_back,#picture_kick_button").animate({
				opacity:1,
				zIndex:100000000000000000000001,
			},400);
		},2000);
		setTimeout(function(){
			$("#base_back").animate({
				width:'70%',
			},800);
		},2400);
		setTimeout(function(){
			$("#picture_append,#member_coment,#font").fadeTo("800",1);
			$($font).animate({
				opacity:1,
			},300);
		},3200);
		setTimeout(function(){
			$("#base_back").css({
				minWidth:"1075px",
				minHeight:"240px",
			});
		},3400);
	});

HTML

         <table class="member_table_frame">
                	<tr>
                    	<td class="member_table_frame_standerd"><div class="picture_click"><img src="#" class="member_table_frame_img"><a class="member_picture_font"><div class="name_font">〇〇〇〇</div><br/><div class="from_font">岡山県</div><div class="coment_font">～～～～～～</div></a></div></td>                 
                    </tr>
                     <tr>
                    </tr>
                </table>
        <div id="backcolor_brack"></div><!--黒色背景-->
                <div id="picture_kick_button"><img style="width:100%; height:100%;" src="img/sample_picture/121.119.137.122.gif"></div><!--×ボックス-->
                <div id="base_back"><!--白色ボックス-->
                    <div id="picture_append"></div><!--画像枠-->
                    <div id="member_coment"></div><!--コメント枠-->
                </div>

.member_table_frame
{
	width:80%; 
	margin-top:20px; 
	z-index:13; 
	opacity:0; 
	margin:200px auto 20px auto; 
	position:absolute; 
	top:50px; 
	right:0; 
	left:0;
}
.member_table_frame_standerd
{
	width:23%; 
	height:auto; 
	margin:0 1.5%;
}
.member_table_frame_MB
{
	width:30%; 
	height:auto; 
	margin:0 1.5%;
}
.member_table_frame_W
{
	width:47%; 
	height:auto; 
	margin:0 1.5%;
}
.member_table_frame_img
{
	width:100%; 
	height:auto;
}
.member_picture_font
{
	opacity:0; 
	text-align:center; 
	margin-left:auto; 
	margin-right:auto; 
	position:absolute;
}
.name_font
{
	font-size:0.1px; 
	margin-top:5%;
}
.from_font
{
	font-size:0.1; 
	margin-top:1%;
}
.coment_font
{
	margin-top:5%; 
	font-size:0.1px;
}

/*memberlistEND*/
/*member詳細表示設定*/
#backcolor_brack
{
	width:20px; 
	height:1800px; 
	background-color:#000; 
	opacity:0; 
	z-index:1; 
	overflow:auto; 
	position:absolute; 
	top:0;
}
#picture_kick_button
{
	opacity:0; 
	position:fixed; 
	top:10%; 
	right:15%; 
	z-index:1; 
	width:50px; 
	height:50px;
}
#base_back
{
	width:20px; 
	height:48%; 
	opacity:0; 
	z-index:1; 
	overflow:auto; 
	background-color:#FFF; 
	position:fixed; 
	top:0; 
	left:0; 
	right:0; 
	bottom:0; 
	margin:auto;
}
#picture_append
{
	width:48%; 
	height:100%; 
	display:none; 
	float:left; 
	margin:1% 1%; 
	line-height:50%;
}
#member_coment
{
	width:50%; 
	height:100%;  
	display:none; 
	float:left;
}

かなり長々とすみません。
ようするに、ページ上にある画像をクリックすると黒色背景が現れ、写真とそれに対するコメントが表示されるといった仕組みです。
ここで問題なのがJSの最初
$(".picture_click").click(function(){
という部分の問題です。この状態だとダブルクリック、または連続クリックしてしまうとその分だけ写真、コメントが表示されてしまい、まったく話になりません。なので、今回はこの$(".picture_click").click(function(){をワンクリック以上を禁止にしたいのですが、どうやればよいでしょうか。よろしくお願いします。

m.ts10806

2017/05/30 07:05

ちょっと細かい指摘かもしれませんがいきなり「こんなコードを書いてみました。」では読む人に「丸投げかな？」という印象をあたえかねません。質問テンプレートを参考にしてもらえれば分かりますが「前提・やりたいこと」を先に書き、「起きている問題・該当のソースコード」と続き「試してみたこと」と段などを意識して書くことで読み手や回答者に「どうしたいか・何が起きているか・どこまでできていそうか」というのが伝わりやすくなります。あまり時間がない中かもしれませんが、何度も質問などでやり取りが発生するよりはマシと僕自身は考えていますので、注意して書くように心がけてみてください。

行動規範の内容に同意します

回答1件

ベストアンサー

ダブルクリックのイベントがとれます。
jQuery リファレンス：dblclick

ひとまず下記を追加することで「ダブルクリックで何もしない（特定の条件化で無効）」は実現できると思います。

JavaScript
1$(".picture_click").dblclick(function(){
2 return false;
3});

あと念のため、clickが多重実行されないようにフラグも活用されるとよいかと思います。

JavaScript
1var flg = false; //実行中フラグ
2
3$(".picture_click").click(function(){
4  if(flg ){ //実行中だと処理を行わない
5   return false;
6 }
7 flg = true;
8
9～～中略～～～
10 //実行終了
11 flg = false;