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

【问题标题】：mouse event firing multiple times per click after user clicks retry用户单击重试后，每次单击都会触发多次鼠标事件
【发布时间】：2013-08-26 02:53:41
【问题描述】：

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

【问题讨论】：

标签： jquery mouseevent event-bubbling

【解决方案1】：

这是因为每次调用 init.start 时，您都在向 $wrapper 元素注册一个新的鼠标按下处理程序。

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

前

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

演示：Fiddle

【讨论】：

我已更改问题的标题以更好地反映答案。

【解决方案2】：

我使用了 Arun P Johny 提供的解决方案中提供的解决方案，该解决方案在 Firefox 和 Chrome 中运行良好。为了让它在 IE9 中工作，我修改了 .on() 和 .off() 语法，以便委托事件。

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

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

【讨论】：