j쿼리 클릭 이벤트가 여러 번 발생합니다.

j쿼리 클릭 이벤트가 여러 번 발생합니다.

기본적인 내용을 파악하기 위해 Javascript로 비디오 포커 게임을 작성하려고 하는데 jQuery click 이벤트 핸들러가 여러 번 발생하는 문제가 발생했습니다.

베팅 버튼에 부착되어 있어 게임 중 첫손에 베팅할 때(1회만 발사)에는 문제가 없지만, 두 번째 베팅에서는 베팅 또는 플레이스 베팅 버튼을 누를 때마다 클릭 이벤트가 2회 발생합니다(따라서 1회 누를 때마다 2배씩 정확한 금액이 베팅됨).전반적으로, 이 패턴은 내기 버튼을 한 번 누를 때 클릭 이벤트가 발생하는 횟수만큼 이 패턴을 따릅니다.-여기서 시퀀스의 ih 용어는 게임 시작부터 ih 손을 베팅하기 위한 것입니다: 1, 2, 4, 7, 11, 16, 22, 29, 37, 46. 이 값은 n(n+1)/2+1 이며, 그 값어치가 무엇이든 간에 충분히 스마트하지 못했습니다.out, 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()하기 .on().

모든 이벤트 핸들러가 삭제됩니다.

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

등록된 '클릭' 이벤트 핸들러만 제거하려면:

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

.one()

보다 나은 옵션은 다음과 같습니다.

핸들러는 이벤트유형별로 요소별로 최대 1회 실행됩니다.

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

---

여러 클래스가 있고 각 클래스는 한 번 클릭해야 하는 경우

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

.off().unbind() 또는 .stopPropagation()이 아직 특정 문제를 수정하지 않은 경우 .stopMediatePropagation()을 사용해 보십시오.이벤트를 버블 없이 처리하거나 이미 처리 중인 다른 이벤트에 영향을 주지 않고 처리할 수 있습니다.예를 들어 다음과 같습니다.

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

효과가 있다!

「클릭」할 때마다 그 함수를 호출하는 경우는, 각 콜에 다른 핸들러 페어를 추가합니다.

jQuery를 사용하여 핸들러를 추가하는 것은 "onclick" 속성의 값을 설정하는 것과 같지 않습니다.원하는 만큼 핸들러를 추가할 수 있습니다.

이벤트가 여러 번 등록되면(같은 핸들러에 있는 경우에도) 여러 번 실행됩니다.

: ★★$("ctrl").on('click', somefunction)페이지가 부분적으로 새로 고쳐질 때마다 이 코드가 실행되면 이벤트도 매번 등록됩니다.ctrl을 누르면 "어떤 기능"을 사용할 수 있습니다. 실행 횟수는 등록된 횟수에 따라 달라집니다.

javascript에 등록된 모든 이벤트에 해당됩니다.

솔루션:

반드시 "ON"을 한 번만 호출해야 합니다.

어떤 이유로 아키텍처를 제어할 수 없는 경우에는 다음과 같이 하십시오.

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

$('.bed').one(function(){ })

문서:

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

안 된다stopPropagation()클릭을 방지하려면 이벤트가 너무 많이 트리거됩니다.

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

이벤트가 DOM 트리에서 버블업되는 것을 방지하여 부모 핸들러가 이벤트를 알리지 않도록 합니다.이 메서드는 인수를 사용할 수 없습니다.

하면 됩니다.event.isPropagationStopped()(이벤트 오브젝트에서) 이 메서드가 호출된 적이 있는지 여부를 판별합니다.

이 메서드는 trigger()로 트리거된 커스텀이벤트에도 기능합니다이것에 의해, 같은 요소상의 다른 핸들러의 실행이 방해되는 것은 아닙니다.

마크업 때문에 문제가 생겼어요.

HTML:

<div class="myclass">
 <div class="inner">

  <div class="myclass">
   <a href="#">Click Me</a>
  </div>

 </div>
</div>

j쿼리

$('.myclass').on('click', 'a', function(event) { ... } );

동일한 클래스 'myclass'가 html에 두 번 있으므로 각 div 인스턴스에 대해 클릭을 호출합니다.

이 문제를 다룰 때는 항상 다음을 사용합니다.

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

이렇게 해서 같은 스트로크로 풀었다가 다시 묶었다 합니다.

더 나은 옵션은 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>

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

저 같은 경우에는 '대리점'을 사용하고 있었기 때문에, 이 솔루션들 중 어느 것도 효과가 없었습니다.멀티클릭 문제의 원인이 된 것은 버튼의 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)
})

동적으로 생성된 링크에서 다음 문제가 발생했습니다.

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

대체품을 찾았습니다.document'body'문제를 해결했습니다.

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

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

페이지 라이프 타임 동안 1회밖에 기동하지 않는다.

따라서 검증을 수행할 경우 올바른 솔루션이 아닙니다. 왜냐하면 검증 후에도 페이지를 떠나지 않으면 다시 돌아오지 않기 때문입니다.사용하기 쉽다

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

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

이벤트가 항상 1회만 발생하도록 하려면 Jquery .one()을 사용합니다.JQuery one은 이벤트핸들러가 1회만 호출하도록 합니다.또한 이벤트 핸들러를 등록하여 현재 클릭 조작 처리가 완료되면 클릭을 더 할 수 있습니다.

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

내 경우 클릭 이벤트가 여러 번 발생했기 때문에 일반 이벤트 핸들러를 다음과 같이 만들었습니다.

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

이게 잘 되는 경우

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

@Pointy answer를 참조해 주세요.이것이 루프일 경우, 다음과 같은 조작을 실시함으로써 클릭 이벤트가 여러 번 발생하는 것을 방지할 수 있습니다.

 $(".bet").each(function(i,item){
       $(this).on({
            click:function(){
                //TRIGGERS ONES
            if(i){
              console.log(i); 
                //DO YOUR THING HERE
            }
            
            }
        });

});

Event.stopPropagation()을 사용합니다.그건 작동할 것이다.

이 솔루션은 나에게 효과가 있었다.요소가 다이내믹을 추가한 경우 이 방법을 사용하여 다이내믹을 추가해야 합니다.이 답변은 향후 확인 사용자를 위한 것일 수 있습니다.

$("body").off("click", ".Element").on("click", ".Element", function(e){
     e.preventDefault();
    //Your code here 
}); 

아래 코드는 채팅 어플리케이션에서 마우스 클릭을 여러 번 트리거하는 이벤트를 처리하는 데 도움이 되었습니다. if (!e.originalEvent.detail || e.originalEvent.detail == 1) { // Your code logic }

언바인드()는 동작하지만 나중에 다른 문제가 발생할 수 있습니다.핸들러는 다른 핸들러 내에 있을 때 여러 번 트리거되므로 핸들러를 외부에 두고 네스트된 핸들러의 값을 원하는 경우 핸들러가 액세스할 수 있도록 글로벌 변수에 할당합니다.

언급URL : https://stackoverflow.com/questions/14969960/jquery-click-events-firing-multiple-times