เหตุการณ์คลิก jQuery ยิงหลายครั้ง

ฉันกำลังพยายามเขียนวิดีโอเกมโป๊กเกอร์ใน Javascript เพื่อหาพื้นฐานของเกมนี้และฉันพบปัญหาที่ jQuery click event handler ยิงหลายครั้ง

พวกมันติดอยู่กับปุ่มสำหรับวางเดิมพันและมันใช้งานได้ดีสำหรับการวางเดิมพันในมือแรกระหว่างเกม (ยิงเพียงครั้งเดียว); แต่ในการเดิมพันสำหรับมือสองก็ยิงเหตุการณ์คลิกสองครั้งในแต่ละครั้งที่มีการเดิมพันหรือเดิมพันสถานที่กดปุ่ม (เพื่อให้เป็นสองเท่าของจำนวนเงินที่ถูกต้องเป็นทางออกสำหรับแต่ละกด) โดยรวมก็เป็นไปตามรูปแบบนี้จำนวนครั้งเหตุการณ์คลิกยิงเมื่อกดปุ่มเดิมพันครั้งเดียว - ที่ithระยะเวลาของลำดับคือสำหรับการเดิมพันของithมือจากจุดเริ่มต้นของเกม: 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
});

.หนึ่ง()

ตัวเลือกที่ดีกว่าคือ.one():

ตัวจัดการดำเนินการได้มากที่สุดหนึ่งครั้งต่อองค์ประกอบต่อประเภทเหตุการณ์

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

ในกรณีที่มีหลายคลาสและแต่ละคลาสจะต้องคลิกหนึ่งครั้ง

$(".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 เพียงครั้งเดียวมันอาจเรียกใช้ "somefunction" หลายครั้ง - จำนวนครั้งที่เรียกใช้จะขึ้นอยู่กับจำนวนครั้งที่ลงทะเบียน

นี้เป็นจริงสำหรับเหตุการณ์ใด ๆ ที่จดทะเบียนในจาวาสคริปต์

สารละลาย:

ให้แน่ใจว่าได้โทร "เปิด" เพียงครั้งเดียว

และด้วยเหตุผลบางอย่างถ้าคุณไม่สามารถควบคุมสถาปัตยกรรมให้ทำดังนี้

$("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 ดังนั้นมันจึงเรียกคลิกสำหรับแต่ละอินสแตนซ์ของ 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()เพื่อตรวจสอบว่าวิธีนี้เคยถูกเรียกว่า (บนวัตถุเหตุการณ์นั้น)

วิธีนี้ใช้ได้กับเหตุการณ์ที่กำหนดเองที่ถูกทริกเกอร์ด้วยทริกเกอร์ () เช่นกันโปรดทราบว่านี่จะไม่ป้องกันตัวจัดการอื่น ๆ ในองค์ประกอบเดียวกันไม่ให้ทำงาน

ในกรณีของฉันฉันใช้ 'ผู้รับมอบสิทธิ์' ดังนั้นจึงไม่มีวิธีแก้ไขปัญหาเหล่านี้ทำงาน ฉันเชื่อว่าเป็นปุ่มที่ปรากฏหลายครั้งผ่านการโทร 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
   }
}

. เพียงหนึ่งครั้งเท่านั้นที่อายุการใช้งานของหน้ากระดาษ

ดังนั้นในกรณีที่คุณต้องการตรวจสอบความถูกต้องนี่ไม่ใช่ทางออกที่ถูกต้องเพราะเมื่อคุณไม่ออกจากหน้าหลังจากการตรวจสอบความถูกต้องคุณจะไม่กลับมา ดีกว่าที่จะใช้

$(".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/

เพื่อให้แน่ใจว่าเหตุการณ์จะเกิดขึ้นเพียงครั้งเดียวคุณสามารถใช้ Jquery .one () JQuery one ทำให้แน่ใจได้ว่าตัวจัดการเหตุการณ์ของคุณเรียกเพียงครั้งเดียว นอกจากนี้คุณสามารถสมัครใช้งานตัวจัดการเหตุการณ์ด้วยการอนุญาตให้คลิกเพิ่มเติมเมื่อคุณเสร็จสิ้นกระบวนการประมวลผลการคลิกปัจจุบัน

<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>แท็กดังนั้นไฟล์ทั้งสองติดกับตัวจัดการเหตุการณ์กับองค์ประกอบ ฉันลบการประกาศที่ซ้ำกันและที่แก้ไขปัญหา

อีกวิธีที่ฉันพบคือถ้าคุณมีหลายคลาสและจัดการกับปุ่มตัวเลือกในขณะที่คลิกที่ป้ายกำกับ

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

Unbind () ใช้งานได้ แต่อาจทำให้เกิดปัญหาอื่นในอนาคต ตัวจัดการทริกเกอร์หลายครั้งเมื่ออยู่ภายในตัวจัดการอื่นดังนั้นให้จัดการกับตัวนอกและถ้าคุณต้องการค่าของตัวจัดการที่ซ้อนกันให้กำหนดให้กับตัวแปรทั่วโลกที่จะสามารถเข้าถึงตัวจัดการของคุณได้

ในกรณีที่ใช้งานได้ดี

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

รหัสด้านล่างใช้สำหรับฉันในแอปพลิเคชันการแชทของฉันเพื่อจัดการการคลิกเมาส์หลายครั้งเพื่อกระตุ้นกิจกรรมมากกว่าหนึ่งครั้ง if (!e.originalEvent.detail || e.originalEvent.detail == 1) { // Your code logic }