CODEWITHSUNDEEP
jquerymouseeventevent-bubbling
otherDewi
otherDewi

Reputation: 1098

mouse event firing multiple times per click after user clicks retry

I have a game that plays fine until I add a retry screen. When the player clicks on retry it is removed with .empty() on the containing element. After the retry the mouse down happens more than once. The greater the number of retries the player has the more times the mousedown event fires.

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

Below is the mousedown event which is bound to the wrapper 

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

If the player does not hit 5 ducks, html is dynamically added to the <div id="winner"></div>. Clicking retry the div is emptied and the init.start function is called.

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

I assume its event bubbling that is causing the problem. Been trying for days to solve this. I tried targeting the element but the only object that appears is the crosshair that is tracking the cursor.

My html is

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

Upvotes: 3

Views: 1859

Answers (2)

otherDewi
otherDewi

Reputation: 1098

I used the solution supplied in the solution supplied by Arun P Johny which worked perfectly in Firefox and Chrome. To get it to work in IE9 I modified the .on() and .off() syntax so the event is delegated.

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

This code handle events for descendants that have not yet been created also.

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

It is because every time init.start is invoked you are registering a new mouse down handler to the $wrapper element.

You can fix it by unbinding the previous handler

Ex

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

Demo: Fiddle

Upvotes: 2

Related Questions