jQuery点击多次触发事件

我正在尝试用Javascript编写一个video扑克游戏作为获取它的基础知识的一种方式,并且遇到了jQuery click事件处理程序多次触发的问题。

他们附在button上进行下注,在游戏中第一手下注(适用于一次),可以正常工作。 但是在下注二手牌时,每次按下投注或投注button时都会触发点击事件两次(所以每次按下投注正确的金额两次)。 总的来说,按下一次下注button后点击事件被触发的次数就是这种模式 – 序列的第i项是从游戏开始时第i只手的下注:1,2,4 ,7,11,16,22,29,37,46,看起来是n(n + 1)/ 2 + 1,因为任何值得的东西 – 我还不够聪明,所以我用OEIS 。 🙂

以下是正在执行的点击事件处理程序的function。 希望这很容易理解(如果没有,请告诉我,我也希望在这方面做得更好):

/** 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 } }); } 

请让我知道,如果你有任何想法或build议,或者如果我的问题的解决scheme类似于解决scheme到另一个问题在这里(我已经看了很多类似的标题线程,并没有find一个可以工作的解决scheme的运气为了我)。

为了确保一次点击操作使用此操作:

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

.unbind()已被弃用,您应该使用.off()方法。 在调用.on()之前,只需调用.on()

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

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

只删除注册的“点击”事件处理程序:

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

。一()

更好的select是.one()

处理程序每​​个事件types每个元素最多执行一次。

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

如果有多个class级,每个class级需要点击一次,

 $(".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”属性的值。 可以根据需要添加尽可能多的处理程序。

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

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

例如,如果我把它放在一个将被加载两次的地方,然后每次点击“somefunction”将会被触发两次。

在正确的逻辑顺序中,只有当你打算解除事件时,才应该使用“关”function。 使用它来隐藏由于“on”函数的双重加载而引起的逻辑错误,即使它看起来可能正在工作也不是一个好方法。

由于标记,我有一个问题。

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中,所以它调用点击每个div的实例。

这是由于特定的事件绑定了多次到同一个元素。

为我工作的解决scheme是:

使用.die()方法杀死所有附加的事件。

然后附上您的方法侦听器。

从而,

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

应该:

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

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

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

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

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

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

更好的select是使用closures

 <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看起来像:

 <button onclick='funName()'>Click here</button> 
 $(element).click(function (e) { if(e.timeStamp !== 0) // This will prevent event triggering more then once { //do your stuff } } 

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

为了确保事件总是只触发一次,可以使用Jquery .one()。 JQuery确保您的事件处理程序只调用一次。 此外,您可以订阅您的事件处理程序,以便在完成当前点击操作的处理后允许进一步点击。

 <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(); 

在我的情况下,我使用“委托”,所以这些解决scheme都没有工作。 我相信这是button出现多次通过Ajax调用导致多个点击问题。 解决scheme是使用超时,所以只有最后一次点击被识别:

 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) })