мышь событие стрельба несколько раз за клик после того, как пользователь нажимает повторить

Question

У меня есть игра, которая отлично играет, пока я не добавлю экран повтора. Когда игрок нажимает на повторную попытку, он удаляется с помощью .empty() в содержащем элементе. После повторной попытки мыши происходит более одного раза. Чем больше количество попыток игрока, тем больше случаев, когда происходит событие mousedown.

http://jsfiddle.net/otherDewi/gNjSH/3/

Ниже MouseDown событие, которое связано с оберткой

 $wrapper.mousedown(function(e) { 
      e.stopPropagation(); 
      x=e.pageX-14; 
      y=e.pageY-14; 
       var $target = $(e.target); 
       console.log($target); 
      shells--; 
      var gotone = false; 

      if(shells>=0){ 
       for(i=2;i>=0;i--){ 
        if(x>duckPosX[i]+15 && y>duckPosY[i]+10){ 
         if(x<(duckPosX[i]+90)&& y<(duckPosY[i]+60)){ 
          ducks[i].hit=true; 
          gotone=true; 
         } 
        } 
       }; 
       if(gotone){ 
        console.log("hit"); 
       }else{ 
        console.log("miss"); 
       } 
      } 
      if(shells===0){ 
       $winner.fadeTo('400',1).show('fast'); 
       if(hit>=5){ 
         alert('you won game over'); 
       }else{ 
        $winner.empty().html('<div><h1>click to try again</h1></div>').fadeTo('400',1).show('fast'); 
       }  
      } 
     }); 

Если игрок не попал 5 уток, HTML динамически добавляется к <div id="winner"></div>. При повторном нажатии div отключается и вызывается функция init.start.

 $winner.on("click", function(e) { 
      e.stopImmediatePropagation(); 
      e.stopPropagation(); 
      $('#winner').empty(); 
     //------------------reset-------------------------// 
      tryAgain=true; 
      shells=7; 
      init.start(); 
     }); 

Я предполагаю, что это событие вызывает пузырь, вызывающее проблему. Пробовал дни, чтобы решить эту проблему. Я попытался настроить таргетинг на элемент, но единственным объектом, который появляется, является перекрестие, отслеживающее курсор.

Мой HTML является

<div class="wrapper"> 
    <div id="splashScreen"><h1>Click to Play</h1></div> 
    <div id="duck1" class="ducks"></div> 
    <div id="duck2" class="ducks"></div> 
    <div id="duck3" class="ducks"></div> 
    <img src="http://s21.postimg.org/hfmq4wts3/sight.png" alt="" id="crosshair"> 
    <h5 id="score"></h5> 
    <div id="winner"> 

    </div> 
</div> 

Answer 1

Это происходит потому, что каждый раз, когда init.start вызывается вы регистрируете новую мышь вниз обработчик к $wrapper элементу.

Вы можете это исправить, отменяя предыдущий обработчик

Ex

$wrapper.off('mousedown.duck').on('mousedown.duck', function(e) { 

Демо: Fiddle

Answer 2

Я использовал раствор, поставляемый в растворе, поставляемой Arun P Johny, которая работала отлично в Firefox и Chrome. Чтобы заставить его работать в IE9, я изменил синтаксис .on() и .off(), чтобы событие было делегировано.

$(document).off('mousedown.duck',$wrapper).on('mousedown.duck',$wrapper, function(e){ 

Этот код обрабатывает события для потомков, которые еще не были созданы.