防止未禁用按钮的点击

Question

在我的页面上，我有一个带有<input type="number" />的<button>，当用户点击<input>或其调节按钮时，<button>的单击事件将触发，并且<button>获得:active样式。设置<button disabled="disabled">可以防止单击事件触发，但<button>会获得禁用样式。

我要找的是如何使用简单的Javascript、CSS或HTML使<button>不可点击，而不是劫持单击事件、禁用它或在其上放置透明物品。它应该看起来正常，但当点击它时，它必须不改变样式或触发单击事件。

我有的http://jsfiddle.net/tzu8gLvm/。

- x13

---

顺便提一下，HTML不需要也不希望在空元素上添加尾部斜杠"/"。 - Touffy

Answer 1

您的限制覆盖了许多好的解决方案。禁用(disabled)有什么问题吗？

但事实上，有一种CSS方法。您可以在输入框上设置pointer-events: none，这样点击将直接穿透。

- Touffy

---

谢谢，这帮助了我很多。 我想避免使用“禁用”这个词，因为我不希望用户认为他们无法点击按钮。 现在唯一的问题是，如果我点击“输入”，具有“pointer-events：none”的按钮将什么也不做（如所需），但当我再次点击输入时，它将单击按钮。 看起来这与焦点有关... - x13

pointer-events: none 禁止鼠标和触摸点击 但如果你将焦点放在按钮上并按下回车或空格键，它将被点击 - undefined

没错。再说一遍，情况很糟糕。另外，输入是否在一个<form>标签内，并且按钮的类型是非默认（submit）值吗？ - undefined

Answer 2

你应该在JavaScript中使用preventDefault()函数来防止某个操作被触发。请查看this链接。

- Ehsan

---

谢谢您的回复，但我也不希望按钮获得:active样式，我已经尝试过去除点击事件，但是当单击时，<button>仍然看起来非常：active。 - x13

Answer 3

经过一些尝试，我自己解决了这个问题。 我不想禁用我的<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 >

- x13

---

我很高兴你最终做了正确的事情并使用了“disabled”。然而，在你重新表达问题并解释你实际的约束之前，这并不是一个可以接受的答案，因为你的约束一直都是纯粹的图形化。 - undefined