Question

在我的网页上，我有一个<button>，内置<input type="number" />，当用户点击<input>或它的微调按钮时，<button>的点击事件将会触发并且<button>获得:active样式。设置<button disabled="disabled">会阻止点击事件触发，但<button>会获得已禁用的样式。

我正在寻找的是如何使用简单的Javascript，CSS或HTML使<button>无法点击，而不会劫持点击事件，禁用它或将某些内容透明化。它应该看起来很正常，但是点击它时不能改变样式或触发点击事件。

我拥有http://jsfiddle.net/tzu8gLvm/

Answer 1

您的限制涵盖了很多好的解决方案。 disabled ??

有什么问题

但实际上，有一种CSS方式。您可以在输入上设置pointer-events: none，然后点击即可通过。

Answer 2

经过一些实验，我自己解决了这个问题。我不想禁用<button>的原因是它看起来会被禁用。显然:disabled样式可以用button:disabled { color: black; }覆盖，这使我完全可以禁用它。

function disable(id) {
  document.getElementById(id).disabled = 'disabled';
}

function enable(id) {
  document.getElementById(id).removeAttribute('disabled');
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  opacity: 1;
}
#orderbutton3:disabled {
  color: black;
}

Begin (clicking the number input clicks the button) :
<br/>
<button id="orderbutton1" type="button">
  Order&nbsp;
  <input type="number" style="width: 38px;" name="amount" min="0" value="0" max="999">
  <b>&times;</b >
  &nbsp;
</button >
<br/>
<hr/>
This is what i get when i just disable it :
<br/>
<button id="orderbutton2" type="button">
  Order&nbsp;
  <input type="number" onmouseover="disable('orderbutton2');" onmouseout="enable('orderbutton2');" style="width: 38px;" name="amount" min="0" value="0" max="999">
  <b>&times;</b >
  &nbsp;
</button >
<br/>
<hr/>
What i ended up with (clicking the input does not click the button and the button appears clickable because i have overridden the text color) :
<br/>
<button id="orderbutton3" type="button">
  Order&nbsp;
  <input type="number" onmouseover="disable('orderbutton3');" onmouseout="enable('orderbutton3');" style="width: 38px;" name="amount" min="0" value="0" max="999">
  <b>&times;</b >
  &nbsp;
</button >

Answer 3

您应该在javascript中使用preventDefault（）函数来阻止触发操作。请查看this链接。

防止单击<按钮>而不禁用它

3 个答案: