你可以嵌套点击事件吗？答案

【问题标题】：Can you nest on click events?你可以嵌套点击事件吗？
【发布时间】：2016-03-12 01:40:39
【问题描述】：

我正在制作一个带有休息计时器和会话计时器的番茄钟。我正在使用单个数字键盘通过尝试嵌套 o'clock 事件来设置每个时钟来将数据输入到每个时钟中。要做到这一点，您单击时钟显示，然后开始输入按钮。 0-9 有一个删除按钮和一个输入按钮。我什至无法让它显示任何功能的任何内容。所以我开始怀疑我正在尝试做的事情是否会奏效？只是寻找您是否可以嵌套点击事件，如果可以，我做错了什么。或者我想要做的另一种方法。做了一个小提琴来查看它最小化 js 和 css 窗口。 https://jsfiddle.net/zackluckyf/jhe98j05/1/

 $(".session-time-clock").click(function(){
            // changes the color to make it flash, add a duration and then change it back
            $(".num-button").css("background-color", "#BCC6CC");
            function myFunction() {
                myVar = setTimeout(changeBackground, 500);
            }
            function changeBackground() {
                $(".num-button").css("background-color", "#575e62");
            }
            myFunction();
            sessionTimeClock = "00:00";
            counter = 4;
        /*

        Will this work?

        */
        $("button").click(function(){
            // gets button text label
            var input = $(this).text();
            // if, else if chain for calculator functions
            if(input !== "Start" && input !== "Pause" && input !== "Reset" && input !== "X" && input !== "Enter" && counter > -1)
                {
                    if(counter === 4)
                        {
                            sessionTimeClock = sessionTimeClock.slice(0,counter-1) + input;
                        }
                    if(counter === 3)
                        {
                            sessionTimeClock = "00:" + input + sessionTimeClock.slice(4);
                        }
                    if(counter === 1)
                        {
                            sessionTimeClock = "0" + input + sessionTimeClock.slice(2);
                        }
                    if(counter === 0)
                        {
                            sessionTimeClock = input +  sessionTimeClock.slice(1);
                        }
                    counter--;
                    if(counter === 2)
                        {
                            counter--;
                        }
                }
            else if(input === "X")
                {
                    if(counter === 3)
                        {
                            sessionTimeClock = "00:0" + sessionTimeClock.slice(4);
                        }
                    else if(counter === 1)
                        {
                            sessionTimeClock = "00:" + sessionTimeClock.slice(3);
                        }
                    else if(counter === 0)
                        {
                            sessionTimeClock = "0" + sessionTimeClock.slice(1);
                        }
                }
            else if(input === "Enter")
                {
                    return;
                }
            $(".session-time-clock").text("hello");
        }); 
    });

    $(".break-time-clock").click(function(){
        $(".num-button").css("background-color", "#BCC6CC");
        function myFunction() {
            myVar = setTimeout(changeBackground, 500);
        }
        function changeBackground() {
            $(".num-button").css("background-color", "#575e62");
        }
        myFunction();
        breakTimeClock = "00:00";
        counter = 4;
        $("button").click(function(){
            // gets button text label
            var input = $(this).text();
            // if, else if chain for calculator functions
            if(input !== "Start" && input !== "Pause" && input !== "Reset" && input !== "X" && input !== "Enter" && counter > -1)
                {
                    if(counter === 4)
                        {
                            breakTimeClock = breakTimeClock.slice(0,counter-1) + input;
                        }
                    if(counter === 3)
                        {
                            breakTimeClock = "00:" + input + breakTimeClock.slice(4);
                        }
                    if(counter === 1)
                        {
                            breakTimeClock = "0" + input + breakTimeClock.slice(2);
                        }
                    if(counter === 0)
                        {
                            breakTimeClock = input +  breakTimeClock.slice(1);
                        }
                    counter--;
                    if(counter === 2)
                        {
                            counter--;
                        }
                }
            else if(input === "X")
                {
                    if(counter === 3)
                        {
                            breakTimeClock = "00:0" + breakTimeClock.slice(4);
                        }
                    else if(counter === 1)
                        {
                            breakTimeClock = "00:" + breakTimeClock.slice(3);
                        }
                    else if(counter === 0)
                        {
                            breakTimeClock = "0" + breakTimeClock.slice(1);
                        }
                }
            else if(input === "Enter")
                {
                    return;
                }
            $(".break-time-clock").text(breakTimeClock);
        }); 
    });

【问题讨论】：

如果你“嵌套”调用 .click() 它仅仅意味着只有在外部点击事件发生时才会分配内部点击处理程序。并且，如果外部点击事件再次发生，将分配一个附加内部点击处理程序——这很少是您真正想要的。（因此与您的代码相关，每次单击“.session-time-clock”时，都会将 additional 单击处理程序添加到“按钮” - 然后单击“按钮”时，所有它的点击处理程序将一个接一个地执行，这会弄乱你的计数器变量。）

标签： javascript jquery css

【解决方案1】：

提供的代码与 jsfiddle 不同。我将涉及到 jsfiddle：

你有这个代码：

    $("button").click(function(){
        if(input === "Start")
            {
                // start clock code
            }
        else if(input === "Pause")
            {
                // pause clock code
            }
        else if(input === "Reset")
            {
                sessionTimeClock = "00:00";
                breakTimeClock = "00:00";
            }
        return true;
    });

这是您第一次将点击处理程序分配给“按钮”，因此它首先被调用。

“输入”变量未定义，因此未调用其他处理程序。（您可以在开发工具控制台中看到错误）。

【讨论】：