Question

我找不到堆栈溢出到这个特定问题的任何答案。我试图只使用纯JavaScript，所以请不要jquery答案。

所以我发布了所有代码作为一般参考，但我相信我的问题在于javascript部分。我的问题是，我怎样才能让我的div＆＃34;注册＆＃34;单击ONCE后是不可点击的？

我尝试在frame之前放置一个disable语句，并在HideLogin（）函数内调用fadeOut。我也尝试过使用css指针事件。没有任何作用，每次我点击SignUp，动画重复。提前感谢您的帮助。

＆＃13;

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

＆＃13;

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

＆＃13;

<!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>

＆＃13;

Answer 1

我建议如下：

定义全局变量loginCliked=false

然后在你的HideLogin函数中：

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

因此，第一次点击它会将loginClicked设置为true。如果您第二次单击该按钮则不执行任何操作

Answer 2

除非您特别需要为按钮使用<div>，否则您可以将HTML更改为使用<button>元素。这样您可以使用disabled属性将其停用，并且可以防止任何进一步的点击，而无需存储和跟踪任何其他JavaScript变量。

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

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

如何在启动onclick后立即禁用Clickable div？

2 个答案: