Question

我有一个可以正常播放的游戏，直到我添加重试屏幕。当玩家点击重试时，它会在包含元素上使用.empty（）删除。重试后，鼠标按下不止一次。玩家重试的次数越多，mousedown事件触发的次数就越多。

下面是绑定到包装器

的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元素注册一个新的鼠标按下处理程序。

您可以通过解除前一个处理程序

的绑定来修复它

实施例

$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){

此代码处理尚未创建的后代的事件。

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

2 个答案: