禁用输入上的 OnClick 事件

OnClick Event on a disabled input

我的代码:

function Clicked(event)
{
  alert(event.id)
}
function ClickedDisabled(event)
{
  alert(event.ids)
}
<input type="text" id="ID" onclick="Clicked(this)" />
<input type="text" id="IDs" onclick="ClickedDisabled(this)" disabled />

function Clicked(event) {
  alert(event.id)
}

function ClickedDisabled(event) {
  alert(event.id)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<input type="text" id="ID" onclick="Clicked(this)" />
<span style="position:relative;">
<input type="text" id="IDs" disabled />
<div style="position:absolute; left:0; right:0; top:0; bottom:0; cursor: pointer;" id="IDs" onclick="ClickedDisabled(this)"></div>
  </span>

试试这个可能对你有帮助

input[disabled] {pointer-events:none}

在您的 CSS 中(它可以防止某些浏览器完全放弃对禁用输入的点击),并捕获对父元素的点击。恕我直言,这是一个更简洁的解决方案,而不是在元素上放置一个透明的覆盖层来捕获点击,并且根据情况也可能比使用 CSS 简单地 "simulating" 禁用状态要容易得多(因为那不会' t阻止输入被提交,还需要覆盖默认浏览器'disabled'样式)。

如果您有多个这样的按钮,则每个按钮都需要一个唯一的父级,以便能够区分单击了哪个按钮,因为对于 pointer-events:none,点击目标是按钮的父级而不是比按钮本身。 (或者您可以测试点击坐标,我想...)。

不过,如果您需要支持旧版浏览器,请检查哪些浏览器支持 pointer-eventshttp://caniuse.com/#search=pointer-events