3

リトライ画面を追加するまで問題なくプレイできるゲームがあります。プレーヤーが再試行をクリックすると、含まれている要素の .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>
4

2 に答える 2

2

これは、init.startが呼び出されるたびに、新しいマウス ダウン ハンドラーを$wrapper要素に登録しているためです。

前のハンドラーのバインドを解除することで修正できます

元

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

デモ:フィドル

于 2013-08-26T03:01:58.003 に答える
0

Firefox と Chrome で完全に機能する Arun P Johny が提供するソリューションで提供されるソリューションを使用しました。IE9 で動作させるために、イベントが委任されるように .on() および .off() 構文を変更しました。

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

このコードは、まだ作成されていない子孫のイベントも処理します。

于 2013-08-26T21:02:10.613 に答える