Question

我有一个附有onClick="clickState()"部分的按钮。现在，在clickState中，我已经指定了用户第一次单击该项时会发生什么。但是，我已经嵌套了另一个点击事件，当用户第二次点击它时会触发另一个功能。

问题是，代码有效，但控制台日志会记录两次状态，因为第二次点击也会运行“第一次点击”。功能。换句话说，我想在触发一次后停止功能，但我不想停止它内部的功能。另外，我刚刚意识到，删除里面的图片有一个小问题。控制台说＆＃34; button.html：55未捕获TypeError：无法执行＆＃39; removeChild＆＃39; on＆＃39;节点＆＃39;：参数1不是类型＆＃39;节点＆＃39;。在button.html：55＆＃34;为什么会这样？

<!DOCTYPE html>
<html>
    <head>
        <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
        <style>
            #btn {
            color:#ffed00;
            line-height:40px;
            height:40px;
            vertical-align:middle;
            width:280px;
            border-radius:3px;
            border:2px #000 solid;
            background: #00a1e0;
            background: -webkit-linear-gradient(#00a1e0, #00a1e0 60%, #005578 100%); 
            background: -o-linear-gradient(#00a1e0 ,#00a1e0 60%, #005578 100%); 
            background: -moz-linear-gradient(#00a1e0, #00a1e0 60%, #005578 100%); 
            background: linear-gradient(#00a1e0, #00a1e0 60%, #005578 100%); 
            box-shadow: 0px 2px 4px rgba(0,0,0,0.35);
            font-family:Roboto;
            font-size:16px;
            text-transform:uppercase;
        }

        #btn.active {
            color:#00a1e0;
            border:2px solid #00a1e0;
            background: #000000;
            background: -webkit-linear-gradient(#000000, #005578 40%, #005578 100%); 
            background: -o-linear-gradient(#000000, #005578 40%, #005578 100%); 
            background: -moz-linear-gradient(#000000, #005578 40%, #005578 100%); 
            background: linear-gradient(#000000, #005578 40%, #005578 100%); 
        }
        #btn:disabled {
            color:#999999;
            border:2px #999999 solid;
            background:#cccccc;
        }
    </style>        
    <script>
        var currentState = "Initial button";
        function clickState() {
            if (currentState == "Loading button") 
            {
                return;
            }
            else
            {
                var btn = document.getElementById("btn");
                btn.innerHTML = '<img src="loading.gif" id="imgLoading" alt="Loading" width="25" height="25" />';
                currentState = "Loading button";

                setTimeout (function() {
                    btn.className += " active";
                    btn.removeChild(document.getElementById("imgLoading"));
                    currentState = "Hit button";
                    console.log(currentState);

                        btn.addEventListener("click", function () {
                        btn.disabled = true;
                        currentState = "Disabled button";
                        btn.removeChild(document.getElementById("imgLoading"));
                        console.log(currentState);
                    });
                }, 5000);

                console.log(currentState);
            }
        }
        console.log(currentState);
    </script>
</head>
<body>
    <button id="btn" onclick="clickState();">Opt me in</button>
</body>

Answer 1

单击按钮后删除事件侦听器。

试试这个：

btn.addEventListener("click", function () {
    btn.removeEventListener("click"); // remove event listener
    btn.disabled = true;
    currentState = "Disabled button";
    btn.removeChild(document.getElementById("imgLoading"));
    console.log(currentState);
});

Answer 2

而不是将onClick="clickState()"添加到元素中。尝试在JS中添加事件侦听器。

document.getElementById("btn").addEventListener("click", clickState);

如何停止其中一个点击功能

2 个答案: