Question

我有这个jsfiddle：http://jsfiddle.net/us28bg4u/1/

为什么，当我按"First" -> "Left"时，行动只会被解雇一次。但是当我再次这样做时，动作会被触发两次，第三次按下它，它会发射三次，依此类推。

我无法弄清楚为什么会堆积起来。有人可以开导我吗？ :)

我试过了：
e.stopPropagation();
e.preventDefault();
- 似乎没有任何东西阻止点击累积。

我的js看起来像这样：

    var side = '';
    var action = '';

    $(document).ready(function () {
        $(".first").click(function (e) {
            logit("First pressed");
            preStart('first');
        });

        $(".second").click(function (e) {
            logit('Second pressed');
            preStart('second');
        });

        function preStart(action) {
            $("#overlay").fadeIn(200);

            $(".leftside").click(function (e) {
                side = "left";
                $("#overlay").fadeOut(200);

                logit('Starting ' + action + ' (' + side + ')');
             });

            $(".rightside").click(function (e) {
                side = "right";
                $("#overlay").fadeOut(200);

                logit('Starting ' + action + ' (' + side + ')');
            });
        }

        function logit(logtxt){
            $("#log").append("<li>"+logtxt+"</li>");

        }
    });

它是否与另一个函数中的click（）函数有关？

Answer 1

您正在处理click处理程序中事件的处理程序，这就是它发生的原因，

像贝洛一样

    var side = '';
    var action = '';

    $(document).ready(function () {
        $(".first").click(function (e) {
            logit("First pressed");
            preStart('first');
        });

        $(".second").click(function (e) {
            logit('Second pressed');
            preStart('second');
        });

        $(".leftside").click(function (e) {
                side = "left";
                $("#overlay").fadeOut(200);

                logit('Starting ' + action + ' (' + side + ')');
             });

            $(".rightside").click(function (e) {
                side = "right";
                $("#overlay").fadeOut(200);

                logit('Starting ' + action + ' (' + side + ')');
            });

        function preStart(action) {
            $("#overlay").fadeIn(200);
        }

        function logit(logtxt){
            $("#log").append("<li>"+logtxt+"</li>");

        }
    });

FIXED DEMO

Answer 2

事件绑定可以堆叠。 preStart内部通过在事件再次绑定之前将.unbind()添加到方法链中来清除先前的绑定，如下所示：

    function preStart(action) {
        $("#overlay").fadeIn(200);

        $(".leftside").unbind("click").click(function (e) {
            side = "left";
            $("#overlay").fadeOut(200);

            logit('Starting ' + action + ' (' + side + ')');
         });

        $(".rightside").unbind("click").click(function (e) {
            side = "right";
            $("#overlay").fadeOut(200);

            logit('Starting ' + action + ' (' + side + ')');
        });
    }

Answer 3

使用OWN参数处理click事件。试试这个，

 $(".leftside").click(function (e) {
     if(!e.handled){
         e.handled = true;
         side = "left";
         $("#overlay").fadeOut(200);

         logit('Starting ' + action + ' (' + side + ')');
     }

});

$(".rightside").click(function (e) {
      if(!e.handled){
            e.handled = true;
             side = "right";
             $("#overlay").fadeOut(200);

            logit('Starting ' + action + ' (' + side + ')');
       }   

  });

更新Fiddle

Answer 4

这取决于您首次单击绑定时调用preStart的次数 $（“。leftside”）。click（）$（“。rightside”）。点击（）一次，当您在$（“。leftside”）和$（“（$。”leftside“）上创建另一个绑定时，再次点击第一个或第二个.rightside“），等等。

在再次绑定它之前，您始终可以取消绑定它。

$(".leftside").unbind('click').click(function (e) {
    // your code
}

Fiddle

jQuery点击两次

4 个答案: