jQuery натискання подій кілька разів

Я намагаюся написати відео-покер у Javascript як спосіб знизити основи, і я зіткнувся з проблемою, коли обробники подій jQuery click запускають кілька разів.

Вони прикріплені до кнопок для здійснення ставки, і це чудово працює для того, щоб робити ставку з першої руки під час гри (стріляючи лише один раз); але, роблячи ставки в другу руку, вона проводить події натискання двічі кожен раз, коли натискається кнопка ставки або ставки (тож двічі правильна сума ставиться за кожну пресу). В цілому, він дотримується цієї схеми для кількості разів, коли подія натискання натискається один раз при натисканні кнопки ставки - де 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
        }
    });
}

Будь ласка, дайте мені знати, якщо у вас є якісь ідеї чи пропозиції чи рішення моєї проблеми подібне до вирішення іншої проблеми тут (я переглянув багато тем з назвою з аналогічним назвою і не пощастило знайти рішення, яке може працювати. для мене).

Щоб переконатися, що дії, натиснуті лише одним натисканням, використовуйте це:

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

Кращим варіантом буде .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 натискати лише один раз, вона може виконати "деяку функцію" кілька разів - скільки разів вона буде виконуватися, залежатиме від того, скільки разів вона була зареєстрована.

це справедливо для будь-якої події, зареєстрованої в JavaScript.

рішення:

переконайтеся, що дзвоніть "увімкнено" лише один раз.

і чомусь, якщо ви не можете керувати архітектурою, зробіть це:

$("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
   }
}

.one запускається лише один раз протягом життя сторінки

Тож у випадку, якщо ви хочете зробити перевірку, це не правильне рішення, тому що, коли ви не залишаєте сторінку після перевірки, ви ніколи не повертаєтесь. Краще використовувати

$(".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 один гарантує, що обробник подій зателефонував лише один раз. Крім того, ви можете підписати обробник подій одним, щоб дозволити подальші кліки після завершення обробки поточної операції клацання.

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