禁用输入上的 OnClick 事件答案

【问题标题】：OnClick Event on a disabled input禁用输入上的 OnClick 事件
【发布时间】：2015-02-21 07:46:57
【问题描述】：

我需要在禁用的 <input> 标签上有一个 onclick 事件。
这里onclick 事件不起作用。
是否有任何其他方法可以使用 onclick 事件来处理基于 id 的禁用输入？
我尝试了下面的代码。
第一个 input 工作，但我需要与第二个工作相同，也与第一个工作相同。（我只需要在input 上调用函数Clicked）。

我的代码：

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 />

【问题讨论】：

Event on a disabled input 的可能重复项

标签： javascript html dom-events

【解决方案1】：

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>

试试这个对你有帮助

【讨论】：

【解决方案2】：

放

input[disabled] {pointer-events:none}

在您的 CSS 中（它可以防止某些浏览器完全放弃对禁用输入的点击），并捕获对父元素的点击。恕我直言，这是一个更干净的解决方案，而不是在元素上放置透明覆盖以捕获点击，并且根据情况也可能比使用 CSS 简单地“模拟”禁用状态要容易得多（因为这不会阻止输入已提交，并且还需要覆盖默认浏览器的“禁用”样式）。

如果您有多个这样的按钮，则需要为每个按钮设置一个唯一的父级，以便能够区分单击了哪个按钮，因为使用pointer-events:none，单击目标是按钮的父级而不是按钮本身. （或者你可以测试一下点击坐标，我想......）。

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

【讨论】：