acara klik jQuery menembak beberapa kali

Saya mencoba untuk menulis permainan video poker dalam Javascript sebagai cara untuk mendapatkan dasar-dasar itu, dan saya telah mengalami masalah di mana penangan event klik jQuery menembak beberapa kali.

Mereka melekat pada tombol untuk menempatkan taruhan, dan itu berfungsi dengan baik untuk menempatkan taruhan di tangan pertama selama pertandingan (menembak hanya sekali); tetapi dalam bertaruh untuk tangan kedua, ia menyalakan acara klik dua kali setiap kali taruhan atau tombol taruhan tempat ditekan (jadi dua kali jumlah yang benar adalah taruhan untuk setiap pers). Secara keseluruhan, ini mengikuti pola ini untuk berapa kali acara klik dilepaskan saat menekan tombol taruhan sekali - di mana istilah h urutannya adalah untuk taruhan tangan ke - h dari awal permainan: 1, 2, 4 , 7, 11, 16, 22, 29, 37, 46, yang tampaknya n (n + 1) / 2 +1 untuk apa pun yang bernilai - dan saya tidak cukup pintar untuk mengetahuinya, saya menggunakan OEIS . :)

Inilah fungsi dengan pengendali acara klik yang beraksi; semoga mudah dimengerti (beri tahu saya jika tidak, saya juga ingin menjadi lebih baik):

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

Tolong beri tahu saya jika Anda memiliki ide atau saran, atau jika solusi untuk masalah saya mirip dengan solusi untuk masalah lain di sini (Saya telah melihat banyak utas yang berjudul sama dan tidak beruntung dalam menemukan solusi yang dapat bekerja untuk saya).

Untuk memastikan tindakan klik saja sekali gunakan ini:

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

.unbind()sudah usang dan Anda harus menggunakan .off()metode ini sebagai gantinya. Cukup panggil .off()tepat sebelum Anda menelepon .on().

Ini akan menghapus semua penangan acara:

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

Untuk hanya menghapus penangan acara 'klik' yang terdaftar:

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

.satu()

Pilihan yang lebih baik adalah .one():

Pawang dieksekusi paling banyak sekali per elemen per jenis peristiwa.

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

Dalam hal beberapa kelas dan setiap kelas perlu diklik sekali,

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

Jika Anda menemukan .off () .unbind () atau .stopPropagation () masih tidak memperbaiki masalah spesifik Anda, coba gunakan .stopImmediatePropagation () Berfungsi bagus dalam situasi ketika Anda hanya ingin acara Anda ditangani tanpa gelembung dan tanpa gelembung mempengaruhi semua acara lain yang sudah ditangani. Sesuatu seperti:

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

lakukan triknya!

Jika Anda memanggil fungsi itu di setiap "klik", maka itu menambahkan sepasang penangan pada setiap panggilan.

Menambahkan penangan dengan jQuery tidak seperti mengatur nilai atribut "onclick". Satu dapat menambahkan penangan sebanyak yang diinginkan.

suatu Acara akan memecat beberapa kali ketika terdaftar beberapa kali (bahkan jika ke penangan yang sama).

misalnya $("ctrl").on('click', somefunction) jika potongan kode ini dieksekusi setiap kali halaman di-refresh sebagian, peristiwa itu juga terdaftar setiap kali. Oleh karena itu bahkan jika ctrl diklik hanya sekali ia dapat menjalankan "fungsi" beberapa kali - berapa kali dieksekusi akan tergantung pada berapa kali terdaftar.

ini berlaku untuk semua acara yang terdaftar dalam javascript.

larutan:

pastikan untuk memanggil "aktif" hanya sekali.

dan untuk beberapa alasan jika Anda tidak dapat mengontrol arsitektur maka lakukan ini:

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

Saya punya masalah karena markup.

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

Anda perhatikan saya memiliki kelas yang sama 'myclass' dua kali dalam html, sehingga ia memanggil klik untuk setiap instance div.

Opsi yang lebih baik adalah menggunakan off

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

Semua hal tentang .on () dan .one () bagus, dan jquery hebat.

Tetapi kadang-kadang, Anda ingin menjadi sedikit lebih jelas bahwa pengguna tidak boleh mengklik, dan dalam hal ini Anda bisa melakukan sesuatu seperti ini:

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

dan tombol Anda akan terlihat seperti:

<button onclick='funName()'>Click here</button>

Itu terjadi karena peristiwa tertentu terikat beberapa kali ke elemen yang sama.

Solusi yang berhasil bagi saya adalah:

Bunuh semua acara yang dilampirkan menggunakan .die() metode.

Dan kemudian lampirkan pendengar metode Anda.

Jadi,

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

seharusnya:

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

Kita harus untuk. stopPropagation()Untuk menghindari klik memicu peristiwa terlalu banyak.

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

Ini Mencegah acara dari menggelegak pohon DOM, mencegah penangan orang tua diberitahu tentang acara tersebut. Metode ini tidak menerima argumen apa pun.

Kita dapat menggunakan event.isPropagationStopped()untuk menentukan apakah metode ini pernah dipanggil (pada objek peristiwa itu).

Metode ini juga berfungsi untuk acara khusus yang dipicu dengan trigger (). Perhatikan bahwa ini tidak akan mencegah penangan lain pada elemen yang sama berjalan.

Dalam kasus saya, saya menggunakan 'delegate', jadi tidak ada solusi yang berhasil. Saya percaya itu adalah tombol yang muncul beberapa kali melalui panggilan ajax yang menyebabkan masalah banyak klik. Solusinya menggunakan batas waktu sehingga hanya klik terakhir yang dikenali:

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

Docs:

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

$(element).click(function (e)
{
  if(e.timeStamp !== 0) // This will prevent event triggering more then once
   {
      //do your stuff
   }
}

.satu-satunya kebakaran satu kali selama masa pakai halaman

Jadi jika Anda ingin melakukan validasi, ini bukan solusi yang tepat, karena ketika Anda tidak meninggalkan halaman setelah validasi, Anda tidak akan pernah kembali. Lebih baik digunakan

$(".bet").on('click',function() 
{ //validation 
   if (validated) { 
      $(".bet").off('click'); //prevent to fire again when we are not yet off the page
      //go somewhere
    }
});

Ketika saya menangani masalah ini, saya selalu menggunakan:

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

Dengan cara ini saya melepaskan ikatan dan rebind pada stroke yang sama.

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

Untuk memastikan bahwa peristiwa selalu hanya terjadi satu kali, Anda dapat menggunakan Jquery .one (). JQuery one memastikan bahwa event handler Anda hanya menelepon sekali. Selain itu, Anda dapat berlangganan pengendali acara Anda dengan satu untuk memungkinkan klik lebih lanjut ketika Anda telah selesai memproses operasi klik saat ini.

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

Coba seperti itu:

<a href="javascript:void(0)" onclick="this.onclick = false; fireThisFunctionOnlyOnce()"> Fire function </a>

Dalam kasus saya, event onclick diaktifkan beberapa kali karena saya membuat event handler generik sebagai perbandingan

  `$('div').on("click", 'a[data-toggle="tab"]',function () {
        console.log("dynamic bootstrap tab clicked");
        var href = $(this).attr('href');
        window.location.hash = href;
   });`

diubah menjadi

    `$('div#mainData').on("click", 'a[data-toggle="tab"]',function () {
        console.log("dynamic bootstrap tab clicked");
        var href = $(this).attr('href');
        window.location.hash = href;
    });`

dan juga harus membuat penangan terpisah untuk klik statis dan dinamis, untuk klik tab statis

    `$('a[data-toggle="tab"]').on("click",function () {
        console.log("static bootstrap tab clicked");
        var href = $(this).attr('href');
        window.location.hash = href;
    });`

Dalam kasus saya, saya telah memuat *.jsfile yang sama pada halaman dua kali dalam sebuah <script>tag, sehingga kedua file melampirkan pengendali acara ke elemen. Saya menghapus deklarasi duplikat dan itu memperbaiki masalah.

Solusi lain yang saya temukan adalah ini, jika Anda memiliki beberapa kelas dan berurusan dengan tombol radio sambil mengklik label.

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

Saya mengalami masalah ini dengan tautan yang dibuat secara dinamis:

$(document).on('click', '#mylink', function({...do stuff...});

Saya menemukan mengganti documentdengan 'body'memperbaiki masalah untuk saya:

$('body').on('click', '#mylink', function({...do stuff...});

Unbind () berfungsi, tetapi itu dapat menyebabkan masalah lain di masa depan. Pawang memicu beberapa kali ketika berada di dalam pawang lain, jadi simpan pawang Anda di luar dan jika Anda ingin nilai-nilai pawang yang bersarang, tetapkan mereka ke variabel global sehingga dapat diakses oleh pawang Anda.

Dalam hal ini berfungsi dengan baik

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

Kode di bawah ini berfungsi untuk saya dalam aplikasi obrolan saya untuk menangani beberapa peristiwa pemicu klik mouse lebih dari satu kali. if (!e.originalEvent.detail || e.originalEvent.detail == 1) { // Your code logic }