jQuery点击事件多次触发

我试图在Javascript中编写一个视频扑克游戏，作为一种获得它的基础知识的方式，我遇到了一个问题，jQuery点击事件处理程序被多次触发。

They're attached to buttons for placing a bet, and it works fine for placing a bet on the first hand during a game (firing only once); but in betting for the second hand, it fires the click event twice each time a bet or place bet button is pressed (so twice the correct amount is bet for each press). Overall, it follows this pattern for number of times the click event is fired when pressing a bet button once--where the ith term of the sequence is for the betting of the ith hand from the beginning of the game: 1, 2, 4, 7, 11, 16, 22, 29, 37, 46, which appears to be n(n+1)/2 + 1 for whatever that's worth--and I wasn't smart enough to figure that out, I used 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
        }
    });
}

如果你有任何想法或建议，或者我的问题的解决方案与这里的另一个问题的解决方案相似，请告诉我(我看过许多类似标题的帖子，但没有幸运地找到一个适合我的解决方案)。

当前回答

我发现的另一个解决方案是，如果你有多个类，并且在单击标签时处理单选按钮。

$('.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();
    }
});

2018-12-22 15:03:23

其他回答

在我的案例中，我使用的是“委托”，所以这些解决方案都不起作用。我相信这是按钮出现多次通过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)
})

2017-09-26 19:26:54

我们必须停止传播()，以避免点击触发事件太多次。

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

它阻止事件冒泡到DOM树，防止任何父处理程序被通知该事件。此方法不接受任何参数。

我们可以使用event. ispropagationstopped()来确定这个方法是否被调用过(在该事件对象上)。

此方法也适用于由trigger()触发的自定义事件。注意，这不会阻止同一元素上的其他处理程序运行。

2015-01-20 05:22:16

要确保单击只执行一次操作，请使用以下命令:

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

2013-02-20 22:31:18

如果你发现.off() .unbind()或. stoppropagation()仍然不能解决你的特定问题，尝试使用. stopimmediatepropagation()在你只是想要你的事件被处理而没有任何冒泡并且不影响任何其他已经被处理的事件的情况下工作得很好。喜欢的东西:

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

真管用!

2015-03-19 18:38:25

在我的例子中，我用<script>标记在页面上加载了两次相同的*.js文件，所以两个文件都将事件处理程序附加到元素上。我删除了重复的声明，这就解决了问题。

2018-07-12 02:16:32

jQuery点击事件多次触发

推荐文章

最新文章

标签