質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.79%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 10K+

score 49

お世話になっています。
またもや、質問です。今回なんですが、こんなコードを書いてみました。
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(){をワンクリック以上を禁止にしたいのですが、どうやればよいでしょうか。よろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2017/05/30 16:05

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

    キャンセル

回答 1

checkベストアンサー

+1

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

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

$(".picture_click").dblclick(function(){
 return false;
});

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

var flg = false; //実行中フラグ

$(".picture_click").click(function(){
  if(flg ){ //実行中だと処理を行わない
   return false;
 }
 flg = true;

~~中略~~~
 //実行終了
 flg = false;


※setTimeout()を多用されているようなのでflgをfalseにするタイミングには注意が必要です。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/05/30 16:39

    大変失礼しました。仰る通りだと思いました。今後は気を付けます。
    今回はありがとうございました!大変助かりました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.79%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る