События нажатия jQuery запускаются несколько раз

Я пытаюсь написать видео покер на Javascript, чтобы разобраться в его основах, и столкнулся с проблемой, когда обработчики событий нажатия jQuery запускаются несколько раз.

Они прикреплены к кнопкам для размещения ставки, и это прекрасно работает для размещения ставки на первую руку во время игры (стрельба только один раз); но при ставке на вторую руку она запускает событие нажатия дважды каждый раз, когда нажимается кнопка ставки или ставка на ставку (таким образом, в два раза правильная сумма ставится для каждого нажатия). В целом, этот шаблон повторяется для количества раз, когда событие нажатия срабатывает при однократном нажатии кнопки ставки - где i-й член последовательности относится к ставке на i-ю руку с начала игры: 1, 2, 4 , 7, 11, 16, 22, 29, 37, 46, что, по-видимому, равно n (n + 1) / 2 + 1 для чего бы то ни было - и я не был достаточно умен, чтобы понять это, я использовал OEIS , :)

Вот функция с обработчиками событий click, которые работают; надеюсь, это легко понять (дайте мне знать, если нет, я тоже хочу стать лучше):

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

Чтобы удалить только зарегистрированные обработчики событий click

$(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 только один раз, он может выполнить «некоторую функцию» несколько раз - сколько раз он будет выполняться, будет зависеть от того, сколько раз он был зарегистрирован.

это верно для любого события, зарегистрированного в 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, поэтому он вызывает click для каждого экземпляра 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()чтобы определить, был ли когда-либо вызван этот метод (для этого объекта события).

Этот метод работает и для пользовательских событий, запускаемых с помощью trigger (). Обратите внимание, что это не помешает запуску других обработчиков на том же элементе.

В моем случае я использовал «делегат», поэтому ни одно из этих решений не сработало. Я полагаю, что это была кнопка, появляющаяся много раз через вызовы 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(){ })

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

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