如何在Javascript中阻止默认按钮时设置按钮标签状态

Question

在此示例中，有一个标签为“选项卡”的按钮，并且css与其他按钮不同（看起来禁用）。我希望该按钮的边框为黑色，同时按下按钮或像其他按钮一样选中。我知道这是因为e.preventDefault（）;但如果我删除它，我的功能会停止。

有没有办法解决？

见小提琴demo

HTML：

<div class="wrapper"> 
<input type="button" class="tab" value="Tab"/> 
<input type="text" class="ans1" style="border-color:black"> 
<div class="def1"><i>Hundreds</i></div> 
<input type="text" class="ans2" style="border-color:black"> 
<div class="def2"><i>Tens</i></div> 
<input type="text" class="ans3" style="border-color:#000;"> 
<div class="def3"><i>Ones </i><b style="margin-left:30px;"></b> </div> 
<input type="text" class="ans4" style="border-color:#000;"> 
<input type="button" class="num" id="one" value="1" /> 
<input type="button" class="num" id="two" value="2" /> 
<input type="button" class="num" id="three" value="3" /> 
<input type="button" class="num" id="four" value="4" /> 
<input type="button" class="num" id="five" value="5" /> 
<input type="button" class="num" id="six" value="6" /> 
<input type="button" class="num" id="seven" value="7" /> 
<input type="button" class="num" id="eight" value="8" /> 
<input type="button" class="num" id="nine" value="9" /> 
<input type="button" class="num" id="zero" value="0" /> 
<input type="button" class="clear" value="Clear"/> 
<input type="button" class="delete" value="Back"/> 
<input type="button" class="tab" value="Tab"/> 
</div> 

---

Answer 1

在你的CSS，风格作为你想要的。 :active是一个伪选择器，用于选择该按钮是否“有效”。 I.E.当它处于mousedown状态时。

.tab:active{ 
    border:1px solid black; 
} 

虽然你可以随意摆弄这种风格，如你所愿。

---

为了风格上的鼠标 '所有按钮' 下，你可以使用类似：

input[type="button"]:active{ /*all input buttons on mousedown */ 
    outline:0;     /*remove default outline from all*/ 
    border:1px solid pink;  /*add styling as you wish*/ 
} 

DEMO

---

在Firefox阅读后，我发现它不喜欢在'mousedown'事件处理函数上使用e.preventDefault（），同时保持'active'css。改变这对一个“点击”事件允许火狐接受按钮作为按钮输入，并因此可以用作例如：

$('.tab').on('click', function (e) {  /*THIS BIT CHANGED*/ 
    e.preventDefault(); 
    ... 
    ... 
});