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

У меня есть игра, которая работает нормально, пока я не добавлю экран повторной попытки. Когда игрок нажимает повторную попытку, он удаляется с помощью .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>

person otherDewi    schedule 26.08.2013    source источник


Ответы (2)


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

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

Ex

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

Демонстрация: Fiddle

person Arun P Johny    schedule 26.08.2013
comment
Я изменил название вопроса, чтобы лучше отразить ответ. - person otherDewi; 26.08.2013

Я использовал решение, предоставленное Аруном П. Джони, которое отлично работало в Firefox и Chrome. Чтобы заставить его работать в IE9, я изменил синтаксис .on() и .off(), чтобы событие было делегировано.

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

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

person otherDewi    schedule 26.08.2013