jQuery单击事件多次触发

Question

我试图用Javascript编写一个视频扑克游戏作为一种获取它的基础知识的方法,并且我遇到了jQuery点击事件处理程序多次触发的问题.

它们附在用于下注的按钮上,并且它适用于在比赛期间在第一手牌上下注(仅发射一次); 但是在投注秒针时,每次按下下注或下注按钮时,它都会触发点击事件两次(因此每次按下两次正确的金额).总的来说,它遵循这种模式,按下一次下注按钮时点击事件被触发的次数 - 其中序列的第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
        }
    });
}

如果您有任何想法或建议,或者我的问题的解决方案与此处的另一个问题的解决方案类似,请告诉我(我已经查看了许多类似标题的线程,并且没有找到可以工作的解决方案的运气为了我).

Answer 1

要确保只使用一次点击操作,请执行以下操作:

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

Answer 2

.unbind()已弃用,您应该使用该.off()方法.在打电话.off()之前,只需打电话.on().

这将删除所有事件处理程序:

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

要仅删除已注册的"点击"事件处理程序:

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

Answer 3

.一()

更好的选择是.one():

每个事件类型的每个元素最多执行一次处理程序.

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

如果有多个类,每个类需要单击一次,

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

Answer 4

如果您发现.off().unbind()或.stopPropagation()仍然无法解决您的具体问题,请尝试使用.stopImmediatePropagation()在您只希望处理事件时不需要任何冒泡且没有任何冒泡的情况下工作得很好影响已经处理的任何其他事件.就像是:

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

诀窍!

Answer 5

如果你在每次"点击"时调用该函数,那么它会在每次调用时添加另一对处理程序.

使用jQuery添加处理程序与设置"onclick"属性的值不同.可以根据需要添加尽可能多的处理程序.

Answer 6

这是一个老问题,但我今天面对它,我认为我的答案将有助于未来寻求类似挑战的人.

它被执行多次,因为"on('click',somefunction)"函数被多次调用,因此它被多次绑定 - 为了永久解决这个问题,你需要确保"on"函数是这样的它只会被执行一次.在鼠标单击事件之后,该函数将仅被触发一次.

例如,如果我将"on('click',somefunction)"放在将被加载两次的地方,那么每次点击 - "somefunction"将被触发两次.

在正确的逻辑序列中,只有在您真正打算取消绑定事件时才应使用"off"函数.使用它来隐藏由于"on"函数的双重加载而导致的逻辑错误,即使它似乎工作也不是一个好方法.

Answer 7

我们必须stopPropagation()为了避免Clicks触发事件太多次。

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

它防止事件在 DOM 树中冒泡，从而防止任何父处理程序收到该事件的通知。此方法不接受任何参数。

我们可以用来event.isPropagationStopped()确定是否曾经调用过此方法（在该事件对象上）。

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

Answer 8

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

文档：

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