jquery - 用户单击重试后，每次单击鼠标事件都会触发多次

Question

我的游戏在添加重试屏幕之前一直运行良好。当玩家点击重试时，它会被包含元素上的 .empty() 删除。重试后，鼠标按下会发生不止一次。玩家重试的次数越多，触发 mousedown 事件的次数就越多。

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

下面是绑定(bind)到包装器的 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 元素注册一个新的鼠标按下处理程序。

您可以通过取消绑定(bind)以前的处理程序来修复它

例如

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

演示:Fiddle