如何防止點擊時按鈕移動？

我有一個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; 
} 
}

來源

2015-12-21 Storm

我看不到在FF43中移動的任何東西？ – Teemu

@Storm - 我看到你的問題。只有一個問題，你需要使用按鈕嗎？ :)否則，我們可以使用其他東西，如divs和生病吸引你很酷。 –

@FrederikMoller - 是的，我可以使用別的東西。我只是盡我所能讓代碼簡單。 – Storm

使你的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

來源

2015-12-21 19:34:08 Axel

@ Axel-驚人的修復和簡單。 – Storm

很高興幫助:) – Axel

我看到了你的問題，但現在看來似乎在不同瀏覽器的行爲不同。

一個CodePen鏈接給你：http://codepen.io/FredM7/pen/adZEor

通過使用「申報單」，我們可以讓自己更輕鬆風格的元素，因此創建一個更好看的比賽。

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>

你會發現，我也有一個跨度的因素在裏面。這是什麼？

跨度是爲了讓我們能夠將一個元素居中（在這種情況下是跨度），而不必知道它有多高或多寬 - 基本上是將一個未知高度和寬度的元素居中。這個跨度將包含我們的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; 
}

3分之100= 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更容易。

我希望這有助於:)。

來源

2015-12-22 04:47:45

如何防止點擊時按鈕移動？

回答

相關問題