javascript - 你能嵌套在点击事件上吗？

Question

我正在制作一个带有休息计时器和 session 计时器的番茄时钟。我正在使用单个小键盘通过尝试嵌套 o'clock 事件来设置每个时钟，从而将数据输入每个时钟。为了实现它，您单击时钟的显示，然后开始输入按钮。有 0-9 个删除按钮和一个输入按钮。我什至无法让它为这两个功能显示任何内容。所以我开始怀疑我正在尝试做的事情是否会奏效？只是在寻找您是否可以嵌套点击事件，如果可以，我做错了什么。或者我想要做的另一种方法。做了一个 fiddle 来查看它最小化 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);
        }); 
    });

Answer 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;
    });

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

“输入”变量未定义，因此其他处理程序未被调用。 (您可以在 Dev Tools 控制台中看到错误)。