单击时如何防止按钮移动？答案

【问题标题】：how to prevent a button from moving when clicked?单击时如何防止按钮移动？
【发布时间】：2015-12-22 12:47:45
【问题描述】：

我在一个 div 中有几个按钮，一旦单击它们就会显示一个值。我遇到的问题是：一旦单击按钮并显示一个值，它也会向下移动。我不确定如何防止这种情况发生。任何人都可以帮忙吗？这是我正在创建的示例的链接： http://codepen.io/anon/pen/eJzROE

<div id="gamebox">
<input type="button" id="one" onclick="clickBtn('one')"/>
<input type="button" id="two" onclick="clickBtn('two')"/>
<input type="button" id="three" onclick="clickBtn('three')"/>
<input type="button" id="four" onclick="clickBtn('four')"/>
<input type="button" id="five" onclick="clickBtn('five')"/>
<input type="button" id="six" onclick="clickBtn('six')"/>
<input type="button" id="seven" onclick="clickBtn('seven')"/>
<input type="button" id="eight" onclick="clickBtn('eight')"/>
<input type="button" id="nine" onclick="clickBtn('nine')"/>
</div>
#gamebox
{
height:460px;
width:460px;
border:2px solid red;
}
input
{
width:150px;
height:150px;
font-size:60px;
}
var player= 1;
function clickBtn(btn){
if(player == 1){
document.getElementById(btn).value = "X";
document.getElementById(btn).disabled = "disabled";
player -=1;
}
else {
document.getElementById(btn).value = "O";
document.getElementById(btn).disabled = "disabled";
player +=1;
}
}

【问题讨论】：

我在 FF43 中看不到任何移动？
@Storm - 我看到了你的问题。只有一个问题，你必须使用按钮吗？ :) 否则我们可以使用 div 之类的其他东西，我会为你画一些很酷的东西。
@FrederikMoller - 是的，我可以使用别的东西。我只是尽力保持代码简单。

标签： javascript css html

【解决方案1】：

对您的 CSS 输入定义进行一些细微调整将有助于将尺寸强制为特定高度。

input
{
  background: white;
  border: 1px solid #DDD;
  height: 50px;
  float: left;
  display: block;
  font-size: 14px;
  width: 150px;
}

更新示例：http://codepen.io/anon/pen/qbNjXg

【讨论】：

@Axel- 惊人的修复和简单。

【解决方案2】：

我看到了您的问题，但它在不同浏览器中的行为似乎有所不同。

为您提供 CodePen 链接：http://codepen.io/FredM7/pen/adZEor

通过使用“divs”，我们可以让自己更轻松地设置元素的样式，从而创建更好看的游戏。

HTML：

<div id="gamebox">
  <div id="one"  class="input enabled" onclick="InputClick('one');"><span></span></div>
  <div id="two"  class="input enabled" onclick="InputClick('two');"><span></span></div>
  <div id="three" class="input enabled" onclick="InputClick('three');"><span></span></div>
  <div id="four" class="input enabled" onclick="InputClick('four');"><span></span></div>
  <div id="five" class="input enabled" onclick="InputClick('five');"><span></span></div>
  <div id="six"  class="input enabled" onclick="InputClick('six');"><span></span></div>
  <div id="seven" class="input enabled" onclick="InputClick('seven');"><span></span></div>
  <div id="eight" class="input enabled" onclick="InputClick('eight');"><span></span></div>
  <div id="nine" class="input enabled" onclick="InputClick('nine');"><span></span></div>
</div>

你会注意到我还有一个 span 元素。这是干什么用的？

跨度允许我们将一个元素（在本例中为跨度）居中，而不必知道它有多高或多宽 - 本质上是居中一个未知高度和宽度的元素。这个跨度将包含我们的 X 或 O。

CSS：

#gamebox
{
  position: relative;
  height: 400px;
  width: 400px;
}

.input
{
  font-size: 40px;
  float: left;
  width: calc(33.33333333333333% - 2px);
  height: calc(33.33333333333333% - 2px);
  background: #505050;
  border: 1px solid black;
  cursor: pointer;
  display: table;
}

.input:hover
{
  background: #909090;
}

.input span {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 40px;
}

100 / 3 = 33.33333333333333

因为我们有 3 个垂直元素和 3 个水平元素，所以我们可能希望尽可能地动态化。我所说的动态是指要更改游戏盒的大小，我们需要做的就是更改“游戏盒”的大小，其他所有内容都会调整大小并适合其中。

JS：

var player = true;

function InputClick(id){
  var element = document.getElementById(id);
  if(HasClass(element, "enabled")) { //Disable
    element.className = "input disabled";
    if (player) {
      element.firstChild.innerHTML = "X";
    } else {
      element.firstChild.innerHTML = "O"; 
    }
    player = !player;

    //
    //Perform other game logic here, like checking win/lose.
    //
  }
}

function HasClass(element, cls) {
    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}

JS 处理玩家转弯，并更改元素的类，因此在找不到“启用”类时不执行更改，因此表现得像“禁用按钮”。

同样，我没有尝试使用按钮，但对我个人而言，从长远来看，使用 div 会容易得多。

我希望这会有所帮助:)。

【讨论】：