複数回発生するjQueryクリックイベント

ビデオポーカーゲームの基本を理解する方法として、JavaScriptでビデオポーカーゲームを作成しようとしています。jQueryのクリックイベントハンドラーが複数回起動するという問題に遭遇しました。

それらは賭けをするためのボタンに取り付けられており、ゲーム中に最初の手で賭けをするのにうまく機能します（1回だけ発砲します）。ただし、秒針の賭けでは、ベットまたはプレイスベットボタンが押されるたびにクリックイベントが2回発生します（そのため、1回の押すごとに2倍の正しい金額が賭けられます）。全体として、ベットボタンを1回押したときにクリックイベントが発生する回数は、このパターンに従います。シーケンスのi番目の用語は、ゲームの最初からi番目のハンドをベットすることです：1、2、4、7、11、16、22、29、37、46。これは、価値のあるものはすべてn（n + 1）/ 2 + 1のように見えます。それを理解するのに十分なほど賢くなかったため、OEISを使用しました。:)

動作しているクリックイベントハンドラーを含む関数を次に示します。うまくいけば、簡単に理解できます（知らない場合は知らせてください。それも上手になりたいと思います）。

/** The following function keeps track of bet buttons that are pressed, until place button is pressed to place bet. **/
function pushingBetButtons() {
    $("#money").text("Money left: $" + player.money); // displays money player has left

    $(".bet").click(function() {
        var amount = 0; // holds the amount of money the player bet on this click
        if($(this).attr("id") == "bet1") { // the player just bet $1
            amount = 1;
        } else if($(this).attr("id") == "bet5") { // etc.
            amount = 5;
        } else if($(this).attr("id") == "bet25") {
            amount = 25;
        } else if($(this).attr("id") == "bet100") {
            amount = 100;
        } else if($(this).attr("id") == "bet500") {
            amount = 500;
        } else if($(this).attr("id") == "bet1000") {
            amount = 1000;
        }
        if(player.money >= amount) { // check whether the player has this much to bet
            player.bet += amount; // add what was just bet by clicking that button to the total bet on this hand
            player.money -= amount; // and, of course, subtract it from player's current pot
            $("#money").text("Money left: $" + player.money); // then redisplay what the player has left
        } else {
            alert("You don't have $" + amount + " to bet.");
        }
    });

    $("#place").click(function() {
        if(player.bet == 0) { // player didn't bet anything on this hand
            alert("Please place a bet first.");
        } else {
            $("#card_para").css("display", "block"); // now show the cards
            $(".card").bind("click", cardClicked); // and set up the event handler for the cards
            $("#bet_buttons_para").css("display", "none"); // hide the bet buttons and place bet button
            $("#redraw").css("display", "block"); // and reshow the button for redrawing the hand
            player.bet = 0; // reset the bet for betting on the next hand
            drawNewHand(); // draw the cards
        }
    });
}

何かアイデアや提案があるかどうか、または私の問題の解決策がここで別の問題の解決策と似ているかどうかを知らせてください（同じようなタイトルのスレッドをたくさん見てきましたが、うまくいく解決策を見つけることができませんでした私のために）。

クリックのみのアクションを確認するには、これを使用します。

$(".bet").unbind().click(function() {
    //Stuff
});

.unbind()は非推奨であり、.off()代わりにメソッドを使用する必要があります。電話をかける.off()直前に電話するだけです.on()。

これにより、すべてのイベントハンドラーが削除されます。

$(element).off().on('click', function() {
    // function body
});

登録された「クリック」イベントハンドラのみを削除するには：

$(element).off('click').on('click', function() {
    // function body
});

。1（）

より良いオプションは.one()：

ハンドラーは、イベントタイプごとに要素ごとに最大1回実行されます。

$(".bet").one('click',function() {
    //Your function
});

複数のクラスがあり、各クラスを1回クリックする必要がある場合は、

$(".bet").on('click',function() {
    //Your function
    $(this).off('click');   //or $(this).unbind()
});

それでも.off（）.unbind（）または.stopPropagation（）で特定の問題が解決されない場合は、.stopImmediatePropagation（）を使用してみてください。すでに処理されている他のイベントに影響を与えます。何かのようなもの：

$(".bet").click(function(event) {
  event.stopImmediatePropagation();
  //Do Stuff
});

トリックを行います！

あなたがそれぞれにその関数を呼び出している場合、それはだ、「クリック」の追加、各コールのハンドラの別のペアを。

jQueryでハンドラーを追加することは、「onclick」属性の値を設定することとは異なります。ハンドラは好きなだけ追加できます。

イベントが複数回登録されると（同じハンドラーであっても）、複数回発生します。

たとえば$("ctrl").on('click', somefunction)、ページが部分的に更新されるたびにこのコードが実行されると、イベントも毎回登録されます。したがって、ctrlが1回だけクリックされた場合でも、「somefunction」が複数回実行される可能性があります。実行される回数は、登録された回数によって異なります。

これは、JavaScriptに登録されたすべてのイベントに当てはまります。

解決：

「on」を1回だけ呼び出すようにしてください。

何らかの理由でアーキテクチャを制御できない場合は、次のようにします。

$("ctrl").off('click'); $("ctrl").on('click', somefunction);

マークアップが原因で問題が発生しました。

HTML：

<div class="myclass">
 <div class="inner">

  <div class="myclass">
   <a href="#">Click Me</a>
  </div>

 </div>
</div>

jQuery

$('.myclass').on('click', 'a', function(event) { ... } );

同じクラス「myclass」がhtmlに2回あることに気づいたので、divの各インスタンスに対してクリックを呼び出します。

より良いオプションはオフを使用することです

<script>
function flash() {
  $("div").show().fadeOut("slow");
}
$("#bind").click(function() {
  $( "body" )
    .on("click", "#theone", flash)
    .find("#theone")
      .text("Can Click!");
});
$("#unbind").click(function() {
  $("body")
    .off("click", "#theone", flash)
    .find("#theone")
      .text("Does nothing...");
});
</script>

.on（）と.one（）に関するすべてのものは素晴らしいです、そしてjqueryは素晴らしいです。

ただし、場合によっては、ユーザーがクリックできないことをもう少し明確にしたい場合があります。そのような場合は、次のようにすることができます。

function funName(){
    $("#orderButton").prop("disabled", true);
    //  do a bunch of stuff
    // and now that you're all done
    setTimeout(function(){
        $("#orderButton").prop("disabled",false);
        $("#orderButton").blur();
    }, 3000);
}

ボタンは次のようになります。

<button onclick='funName()'>Click here</button>

これは、特定のイベントが同じ要素に複数回バインドされているために発生します。

私のために働いた解決策は：

.die()メソッドを使用して添付されたすべてのイベントを強制終了します。

次に、メソッドリスナーをアタッチします。

したがって、

$('.arrow').click(function() {
// FUNCTION BODY HERE
}

でなければなりません：

$('.arrow').die("click")
$('.arrow').click(function() {
// FUNCTION BODY HERE
}

stopPropagation()クリックを回避するには、イベントが何度もトリガーされる必要があります。

$(this).find('#cameraImageView').on('click', function(evt) {
   evt.stopPropagation();
   console.log("Camera click event.");
});

これは、イベントがDOMツリーを泡立たせないようにし、親ハンドラーにイベントが通知されないようにします。このメソッドは引数を受け入れません。

event.isPropagationStopped()このメソッドが（そのイベントオブジェクトで）呼び出されたかどうかを判断するために使用できます。

このメソッドは、trigger（）でトリガーされたカスタムイベントでも機能します。これにより、同じ要素の他のハンドラーの実行が妨げられることはありません。

私の場合、「デリゲート」を使用していたため、これらのソリューションはどれも機能しませんでした。マルチクリックの問題を引き起こしていたのは、ajax呼び出しを介して複数回表示されるボタンだったと思います。解決策はタイムアウトを使用していたため、ラストクリックのみが認識されます。

var t;
$('body').delegate( '.mybutton', 'click', function(){
    // clear the timeout
    clearTimeout(t);
    // Delay the actionable script by 500ms
    t = setTimeout( function(){
        // do something here
    },500)
})

$('.bed').one(function(){ })

ドキュメント：

http://api.jquery.com/one/

$(element).click(function (e)
{
  if(e.timeStamp !== 0) // This will prevent event triggering more then once
   {
      //do your stuff
   }
}

.oneは、ページの存続期間中に1回だけ発生します

したがって、検証を実行したい場合、これは適切なソリューションではありません。検証後にページを離れない場合、戻ってくることは決してないからです。使用する方が良い

$(".bet").on('click',function() 
{ //validation 
   if (validated) { 
      $(".bet").off('click'); //prevent to fire again when we are not yet off the page
      //go somewhere
    }
});

私がこの問題に対処するとき、私は常に以下を使用します：

$(".bet").unbind("click").bind("click", function (e) {
  // code goes here
}

このようにして、同じストロークでバインド解除と再バインドを行います。

https://jsfiddle.net/0vgchj9n/1/

イベントが常に1回だけ発生するようにするには、Jquery .one（）を使用できます。jQuery oneは、イベントハンドラーが1回だけ呼び出されるようにします。さらに、現在のクリック操作の処理が完了したときに、イベントハンドラーをサブスクライブして、さらにクリックを許可することができます。

<div id="testDiv">
  <button class="testClass">Test Button</button>
</div>

…

var subscribeClickEvent = function() {$("#testDiv").one("click", ".testClass", clickHandler);};

function clickHandler() {
  //... perform the tasks  
  alert("you clicked the button");
  //... subscribe the click handler again when the processing of current click operation is complete  
  subscribeClickEvent();
}

subscribeClickEvent();

その方法を試してください：

<a href="javascript:void(0)" onclick="this.onclick = false; fireThisFunctionOnlyOnce()"> Fire function </a>

私の場合、onclickイベントは複数回発生していました。

  `$('div').on("click", 'a[data-toggle="tab"]',function () {
        console.log("dynamic bootstrap tab clicked");
        var href = $(this).attr('href');
        window.location.hash = href;
   });`

に変わった

    `$('div#mainData').on("click", 'a[data-toggle="tab"]',function () {
        console.log("dynamic bootstrap tab clicked");
        var href = $(this).attr('href');
        window.location.hash = href;
    });`

また、静的タブクリックの場合は、静的クリックと動的クリックのハンドラを個別に作成する必要があります。

    `$('a[data-toggle="tab"]').on("click",function () {
        console.log("static bootstrap tab clicked");
        var href = $(this).attr('href');
        window.location.hash = href;
    });`

私の場合*.js、ページ内の同じファイルを<script>タグで2回ロードしたため、両方のファイルが要素にイベントハンドラーをアタッチしていました。重複した宣言を削除し、問題を修正しました。

私が見つけた別の解決策は、複数のクラスがあり、ラベルをクリックしながらラジオボタンを処理している場合です。

$('.btn').on('click', function(e) {
    e.preventDefault();

    // Hack - Stop Double click on Radio Buttons
    if (e.target.tagName != 'INPUT') {
        // Not a input, check to see if we have a radio
        $(this).find('input').attr('checked', 'checked').change();
    }
});

動的に生成されたリンクでこの問題が発生していました：

$(document).on('click', '#mylink', function({...do stuff...});

私は問題documentを'body'修正してに置き換えることがわかりました：

$('body').on('click', '#mylink', function({...do stuff...});

バインド解除（）は機能しますが、将来的に他の問題が発生する可能性があります。ハンドラーは別のハンドラーの内部にあるときに複数回トリガーされるため、ハンドラーを外部に保持し、ネストされたハンドラーの値が必要な場合は、ハンドラーがアクセスできるグローバル変数に値を割り当てます。

これがうまくいく場合

$( "#ok" ).bind( "click", function() {
    console.log("click"); 
});

以下のコードは、チャットアプリケーションで複数のマウスクリックトリガーイベントを2回以上処理するために機能しました。 if (!e.originalEvent.detail || e.originalEvent.detail == 1) { // Your code logic }