332

基本を理解する方法として、Javascriptでビデオポーカーゲームを書き込もうとしていますが、jQueryクリックイベントハンドラーが複数回発生するという問題が発生しました。

それらは賭けをするためのボタンに取り付けられており、ゲーム中に直接賭けをするのにうまく機能します（1回だけ発砲します）。ただし、秒針の賭けでは、賭けまたはプレースベットボタンが押されるたびにクリックイベントが2回発生します（したがって、押すたびに正しい金額の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
        }
    });
}

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

4

26 に答える 26

601

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

$(".bet").unbind().click(function() {
    //Stuff
});
于 2013-02-20T22:31:18.113 に答える
432

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

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

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

登録済みの「クリック」イベント ハンドラのみを削除するには:

$(element).off('click').on('click', function() {
    // function body
});
于 2014-01-02T10:56:07.823 に答える
165

。1（）

より良いオプションは次の.one()とおりです。

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

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

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

$(".bet").on('click',function() {
    //Your function
    $(this).off('click');   //or $(this).unbind()
});
于 2014-06-14T09:21:47.553 に答える
104

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

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

トリックを行います！

于 2015-03-19T18:38:25.163 に答える
18

「クリック」するたびにその関数を呼び出すと、呼び出しごとに別のハンドラーのペアが追加されます。

jQuery を使用してハンドラーを追加することは、"onclick" 属性の値を設定することとは異なります。必要な数のハンドラーを追加できます。

于 2013-02-20T00:03:58.923 に答える
16

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

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

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

解決：

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

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

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

于 2014-10-28T07:34:43.803 に答える
4

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

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) { ... } );

html に同じクラス「myclass」が 2 つあります。div のインスタンスごとにクリックを呼び出します。

于 2015-09-18T09:58:44.763 に答える
4

この問題に対処するときは、常に次を使用します。

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

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

于 2018-07-27T19:44:10.517 に答える
4

stopPropagation()Clicks トリガー イベントを何度も回避する必要があります。

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

イベントが DOM ツリーをバブリングするのを防ぎ、親ハンドラーにイベントが通知されるのを防ぎます。このメソッドは引数を受け入れません。

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

このメソッドは、trigger() でトリガーされるカスタム イベントにも機能します。これにより、同じ要素の他のハンドラーの実行が妨げられることはないことに注意してください。

于 2015-01-20T05:22:16.463 に答える
0

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

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

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

…</p> 

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();
于 2016-09-04T23:40:32.333 に答える