禁用输入上的OnClick事件

Question

• 我需要在<input>标签上有一个onclick事件，该事件被禁用。
• 这里onclick事件不起作用。
• 有没有其他方法可以使用基于id的禁用输入的onclick事件？
• 我试过下面的代码。
• 第一次input工作但我需要与第二次input相同，也与第一次input相同。 （我需要调用函数Clicked on input only）。
• 提前致谢..

我的代码：

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

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

试试这可能会对你有所帮助

Answer 2

放

input[disabled] {pointer-events:none}

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

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

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