Css按钮可见点击，但事件没有注册，直到重复点击。

问题描述 投票：0回答：1

Css按钮可见点击，但事件不注册，直到重复点击。按钮只有在重复点击后才能工作。 它们是由一个CSS脚本定制的。我永远不知道他们什么时候不会点击。 光标表示它找到了整个按钮。

这里是CSS的描述。

.button-round-leather {
  background:url(img/leather_background_light_brown.png);
  background-size:cover;
  border-radius: 50%;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  color: #F0E478; /* Light Gold */
  cursor: pointer;
  display: inline-block;
  font-size: 30px;
  height: 60px;
  margin: 0; 
  padding: 20px;
  padding-top: 3px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition-duration:.60s;
  width: 400px;
  vertical-align: top;
  align-items: flex-end; 
}

.button-round-leather:hover {
  background:url(img/leather_background_dark_brown.png);
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 3px 10px 0 rgba(0,0,0,0.9);
  transform: scale(.95);
}

.button-round-leather:active {
  content: ""; /* NEW */
  background: blue; /* NEW */
  display: block; /* NEW */
  background-color: #f1f1f1; /* Green */
  box-shadow: 0 5px #666;
  transform: translateY(4px);
  position: absolute; /* NEW */
  padding-top: 20%;
  padding-left: 35%;
  position: relative;
  margin-left: -20px !important;
  margin-top: -120%;
  text-align: center;
  opacity: 0;
  transition: all 0.8s
}

.button-round-leather:active:after {
  padding: 0;
  margin: 0;
  opacity: 1;
  transition: 0s
}

.button-round-leather span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button-round-leather span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button-round-leather:hover span {
  padding-right: 25px;
}

.button-round-leather:hover span:after {
  opacity: 1;
  right: 0;
}

这是我的HTML代码

<DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
  <script>
  // Store
    sessionStorage.setItem("language", "");
  </script>

<!-- BUTTONS FOR MEMBERS -->
<table>
  <tr>  
    <! -- ENGLISH SPEAKING MEMBER -->
    <td style="width:30%">
    <button class="button-round-leather"
        style="vertical-align:middle"
        onclick="EnglishMember()">
        <span>
        Sign In
        </span>
    </button>
    </td>
    <td style="width:70%">
    <label><h2>ENGLISH SPEAKING MEMBERS</h2></label>
    </td>
  </tr>

<!-- BUTTONS FOR GUESTS -->
  <tr>
    <! -- ENGLISH SPEAKING GUEST -->
    <td style="width:30%">  
    <button class="button-round-leather" 
        style="vertical-align:middle"
        onclick="EnglishGuest()">
        <span>
        I speak English 
        </span>
    </button>
    </td>
    <td style="width:70%">
    <label><h2>GUEST</h2></label>
    </td>
</table>

    <!--SET SESSION STORAGE VARIABLE -->

    <!-- <div id="result"></div> -->
    <script>
    //TAKE MEMBERS STRAIGHT TO LOGIN SCREEN
      //SET MEMBER LANGUAGE TO ENGLISH--GO TO LOGIN SCREEN
      function EnglishMember(){
        // CHECK BROWSER SUPPORT
        if (typeof(Storage) !== "undefined") {
          // STORE VARIABLE
          sessionStorage.setItem("language", "DatabaseE");
          // RETRIEVE VARIABLE TO DISPLAY IN RESULT
          //document.getElementById("result").innerHTML = sessionStorage.getItem("language");
          // GO TO WEBSITE
          window.location.href = 'loginMembers.html';
        } else {
          // BROWSER ERROR
          document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
        }
      }
    </script>
    <script>
    //TAKE GUESTS STRAIGHT TO GUEST SCREEN
      //SET GUEST LANGUAGE TO ENGLISH--GO TO GUEST SCREEN
      function EnglishGuest(){
        // CHECK BROWSER SUPPORT
        if (typeof(Storage) !== "undefined") {
          // STORE VARIABLE
          sessionStorage.setItem("language", "English");
          // RETRIEVE VARIABLE TO DISPLAY IN RESULT
          //document.getElementById("result").innerHTML = sessionStorage.getItem("language");
          // GO TO WEBSITE
          window.location.href = 'loginE.htm';
          // BROWSER ERROR
        } else {
          document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
        }
      }
    </script>
</body>
</html>
css button
1个回答
0
投票

你的代码中少了一些错别字，用这个html代替。你的window.location.href = 'LoginE.html'，你的".html "中的 "l "不见了。另外，你应该在你的标签中使用分号，在写完样式和onclick之后。我也添加了这些。

我相信在你的css中，当你在psuedo类后使用::时也应该使用双冒号。我也添加了这些。另外，你在文档中缺少了一些分号，我也添加了。这里是更新后的代码。

.button-round-leather {
  background: url(img/leather_background_light_brown.png);
  background-size: cover;
  border-radius: 50%;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  color: #F0E478; /* Light Gold */
  cursor: pointer;
  display: inline-block;
  font-size: 30px;
  height: 60px;
  margin: 0;
  padding: 20px;
  padding-top: 3px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition-duration: 0.6s;
  width: 400px;
  vertical-align: top;
  align-items: flex-end;
}

.button-round-leather:hover {
  background: url(img/leather_background_dark_brown.png);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.9);
  transform: scale(0.95);
}

.button-round-leather span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button-round-leather span::after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button-round-leather:hover span {
  padding-right: 25px;
}

.button-round-leather:hover span::after {
  opacity: 1;
  right: 0;
}


<html>

  <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
  </head>

  <body>
    <script>
      // Store
      sessionStorage.setItem("language", "");

    </script>

    <!-- BUTTONS FOR MEMBERS -->
    <table>
      <tr>
        <! -- ENGLISH SPEAKING MEMBER -->
          <td style="width:30%;">
            <button class="button-round-leather" style="vertical-align:middle;" onclick="EnglishMember();">
              <span>
                Sign In
              </span>
            </button>
          </td>
          <td style="width:70%">
            <label>
              <h2>ENGLISH SPEAKING MEMBERS</h2>
            </label>
          </td>
      </tr>

      <!-- BUTTONS FOR GUESTS -->
      <tr>
        <! -- ENGLISH SPEAKING GUEST -->
          <td style="width:30%;">
            <button class="button-round-leather" style="vertical-align:middle;" onClick="EnglishGuest();">
              <span>
                I speak English
              </span>
            </button>
          </td>
          <td style="width:70%">
            <label>
              <h2>GUEST</h2>
            </label>
          </td>
    </table>

    <!--SET SESSION STORAGE VARIABLE -->

    <!-- <div id="result"></div> -->
    <script>
      //TAKE MEMBERS STRAIGHT TO LOGIN SCREEN
      //SET MEMBER LANGUAGE TO ENGLISH--GO TO LOGIN SCREEN
      function EnglishMember() {
        // CHECK BROWSER SUPPORT
        if (typeof(Storage) !== "undefined") {
          // STORE VARIABLE
          sessionStorage.setItem("language", "DatabaseE");
          // RETRIEVE VARIABLE TO DISPLAY IN RESULT
          //document.getElementById("result").innerHTML = sessionStorage.getItem("language");
          // GO TO WEBSITE
          window.location.href = 'loginMembers.html';
        } else {
          // BROWSER ERROR
          document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
        }
      }

    </script>
    <script>
      //TAKE GUESTS STRAIGHT TO GUEST SCREEN
      //SET GUEST LANGUAGE TO ENGLISH--GO TO GUEST SCREEN
      function EnglishGuest() {
        // CHECK BROWSER SUPPORT
        if (typeof(Storage) !== "undefined") {
          // STORE VARIABLE
          sessionStorage.setItem("language", "English");
          // RETRIEVE VARIABLE TO DISPLAY IN RESULT
          //document.getElementById("result").innerHTML = sessionStorage.getItem("language");
          // GO TO WEBSITE
          window.location.href = 'loginE.html';
          // BROWSER ERROR
        } else {
          document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
        }
      }

    </script>
  </body>

</html>

但是，对于主要问题，你的按钮每次都在工作，问题是你必须点击的足够快，所以当你的鼠标光标还在按钮上时，鼠标点击-释放就会发生。因为你的动画使按钮快速向上飞，所以当鼠标释放时，有时没有击中按钮，而是击中了文档的主体。试着在删除动画后点击你的按钮(或者快速点击按钮的上边。)。这样可以确保当你释放鼠标点击时，它仍然在按钮的顶部"，你会发现这就是问题的原因。你的解决方案是将这个动画增加半秒左右的延迟。这完全取决于你，因为我不知道你用这个来做什么，以及你希望它是怎样的。

你可以选择在按钮被点击后，用JavaScript使其移动，而不是像你在CSS中做的那样，在按钮被点击时移动。

像这样就可以了。

var d = document.getElementById("btn");
d.addEventListener('click',function(){
    d.className = d.className + " moveBtn";
});

你需要添加一个你喜欢的类，这意味着按钮应该在哪里移动，就像你已经做的那样，并在上面的JS脚本中使用该类。

希望能帮到你:)

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.