在我添加重试屏幕之前，我的游戏可以正常运行。当玩家点击重试时，它会被包含元素上的 .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>. 点击 retry 会清空 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>