如何在onclick啓動後禁用可點擊的div？

Question

我無法找到堆棧溢出到這個具體問題的任何答案。我試圖只使用純JavaScript，所以請不要jQuery的答案。

所以我發佈了所有的代碼作爲一般參考，但我相信問題在於JavaScript部分。我的問題是，我怎麼能這樣做，讓我的div「註冊」是不可點擊後點擊一次？

我試圖在HideLogin（）函數中調用幀和fadeOut之前調用disable語句。我也嘗試過使用css指針事件。沒有任何工作，每次我點擊註冊，動畫重複。預先感謝您的幫助。

function HideLogin() { 
 
    var login = document.getElementById("login"); 
 
    var SignUpSheet = document.getElementById("SignUpSheet"); 
 
    var titlecard = document.getElementById("titlecard"); 
 
    var signup = document.getElementById("signup"); 
 

 
    SignUpSheet.style.display = "block"; 
 
    titlecard.style.display = "block"; 
 

 
    frame(signup); 
 
    fadeOut(login); 
 

 
    /*fadeIn(document.getElementById("SignUpSheet")); 
 
    
 
    \t fadeIn(document.getElementById("titlecard")); */ 
 
} 
 

 
function frame(signup) { 
 
    var pos = 125; 
 
    var id = setInterval(function() { 
 
    if (pos == 0) { 
 
     clearInterval(id); 
 
    } else { 
 
     pos--; 
 
     signup.style.top = pos + 'px'; 
 
    } 
 
    }, 1); 
 
} 
 

 
function fadeOut(element) { 
 
    var op = 1; // initial opacity 
 
    var timer = setInterval(function() { 
 
    if (op <= 0.1) { 
 
     clearInterval(timer); 
 
     element.style.display = 'none'; 
 
    } 
 
    element.style.opacity = op; 
 
    element.style.filter = 'alpha(opacity=' + op * 100 + ")"; 
 
    op -= op * 0.1; 
 
    }, 20); 
 
} 
 

 
function fadeIn(element) { 
 
    var op = 0.1; // initial opacity 
 
    var timer = setInterval(function() { 
 
    if (op >= 1) { 
 
     clearInterval(timer); 
 
    } 
 
    element.style.opacity = op; 
 
    element.style.display = "block"; 
 
    op += 0.1; 
 
    }, 20); 
 
}

body, 
 
html { 
 
    min-height: 100%; 
 
} 
 

 
body 
 
/* Background handeling*/ 
 

 
{ 
 
    color: white; 
 
    background: url(images/Hunter.jpg) center no-repeat; 
 
    background-size: cover; 
 
    background-color: #444; 
 
} 
 

 

 
/*------------------------------------------------------------- */ 
 

 
#logBox 
 
/*Div that holds two links */ 
 

 
{ 
 
    position: relative; 
 
    //border: 2px solid white; 
 
    height: 300px; 
 
    width: 300px; 
 
    margin-left: 70px; 
 
    margin-top: 50px; 
 
} 
 

 
#login 
 
/* login link */ 
 

 
{ 
 
    position: absolute; 
 
    cursor: pointer; 
 
    display: block; 
 
    //border: 2px solid white; 
 
    background: -webkit-linear-gradient(red, yellow); 
 
    -webkit-background-clip: text; 
 
    -webkit-text-fill-color: transparent; 
 
    font-family: papyrus; 
 
    font-size: 70px; 
 
    color: red; 
 
    text-shadow: 2px 2px black; 
 
    transition: text-shadow 0.5s ease; 
 
} 
 

 
#login:hover { 
 
    background: -webkit-linear-gradient(white, black); 
 
    -webkit-background-clip: text; 
 
    -webkit-text-fill-color: transparent; 
 
    text-shadow: 4px 4px black; 
 
} 
 

 
#signup 
 
/* sign up link */ 
 

 
{ 
 
    position: absolute; 
 
    cursor: pointer; 
 
    display: block; 
 
    //border: 2px solid white; 
 
    background: -webkit-linear-gradient(red, yellow); 
 
    -webkit-background-clip: text; 
 
    -webkit-text-fill-color: transparent; 
 
    top: 125px; 
 
    font-family: papyrus; 
 
    font-size: 70px; 
 
    color: red; 
 
    text-shadow: 2px 2px black; 
 
    transition: text-shadow 0.5s ease; 
 
} 
 

 
#signup:hover { 
 
    background: -webkit-linear-gradient(white, black); 
 
    -webkit-background-clip: text; 
 
    -webkit-text-fill-color: transparent; 
 
    text-shadow: 4px 4px black; 
 
} 
 

 

 
/*--------------------------------------------------------------- */ 
 

 

 
/* Div that holds two sheets */ 
 

 
#LogInSheet { 
 
    display: none; 
 
} 
 

 
#LoginTitle {} 
 

 
#SignUpSheet { 
 
    display: none; 
 
} 
 

 
#SignUpTitle {} 
 

 

 
/*--------------------------------------------------------------- */ 
 

 
#titlecard 
 
/*title display */ 
 

 
{ 
 
    position: absolute; 
 
    display: none; 
 
    bottom: 0px; 
 
    right: 50px; 
 
    //border: 2px solid white; 
 
    background: -webkit-linear-gradient(white, black); 
 
    -webkit-background-clip: text; 
 
    -webkit-text-fill-color: transparent; 
 
    font-size: 45px; 
 
    color: gray; 
 
    text-align: center; 
 
    font-family: papyrus; 
 
    text-shadow: 2px 2px black; 
 
}

<!doctype html> 
 
<html> 
 

 
<head> 
 
    <title>The Prime Legion</title> 
 
    <link rel="stylesheet" type="text/css" href="page1.css"> 
 
    <script type="text/javascript" src="page1.js"></script> 
 
</head> 
 

 
<body> 
 
    <div id="logBox"> 
 
    <div id="login" onclick="HideSignin()"> 
 
     Log In 
 
    </div> 
 
    <div id="signup" onclick="HideLogin()"> 
 
     Sign Up 
 
    </div> 
 
    </div> 
 
    <div id="LogInSheet"> 
 
    <div id="LoginTitle"> 
 
     <p> 
 
     <h4>Hello</h4> 
 
     </p> 
 
    </div> 
 
    </div> 
 
    <div id="SignUpSheet"> 
 
    <div id="SignupTitle"> 
 
     <p> 
 
     <h4>Welcome</h4> 
 
     </p> 
 
    </div> 
 
    </div> 
 
    <div id="titlecard"> 
 
    <p> 
 
     <h1>The Prime Legion</h1> 
 
    </p> 
 
    </div> 
 
</body> 
 

 
</html>

Answer 1

除非您特別需要使用<div> s作爲按鈕，否則可以將HTML更改爲使用<button>元素。通過這種方式，您可以使用disabled屬性將其禁用，並且應該可以防止任何進一步點擊，而無需存儲和跟蹤任何其他JavaScript變量。

<button id="signup" onclick="HideLogin()">Sign Up</button> 

function HideLogin() { 
    document.getElementById("signup").disabled = true; 
    ... 
} 

Answer 2

我建議如下：

定義你的HideLogin功能的全局變量loginCliked=false

則：

HideLogin = function(){ 
    if(!loginClicked){ 
     loginClicked=true; 
     // Do everything else 
    } 
} 

使之與首先點擊它將設置loginClicked到true。如果第二次單擊該按鈕，它什麼也不做