Javascript 已禁用表单元素和oncontextmenu问题

我们遇到一个问题，禁用的表单元素（输入，文本区域，…）对右键单击操作（oncontextmenu属性）没有反应。启用表单元素后，一切正常。请考虑以下伪代码：

<div id="test" oncontextmenu="someFunction()">
  <input id="textbox" type="text" disabled="disabled">
  SOME_PADDING
  <input id="calendar" type="image" disabled="disabled">
</div>

一些填充物

真正的问题是，它在Chrome和Firefox中不起作用，但在IE8和Opera中起作用

当我们右键点击Chrome或Firefox中的文本框或日历元素时，什么都没有发生。如果我们在元素之间单击（一些填充），则会出现右键单击菜单

因此，在被禁用的表单上单击鼠标右键似乎在Chrome和Firefox中不起作用。以前有没有人经历过类似的行为

提前谢谢
斯蒂金

编辑：正如Pekka所提到的，禁用的表单元素对右键单击没有反应是有意义的。真正的问题似乎是围绕它的div的oncontextmenu属性在单击Firefox/Chrome中禁用的表单元素时没有做出正确的反应

---

EDIT2：在线示例可以在这里找到：-除了IE8，这在所有情况下都有效。有没有建议采取什么措施来迫使IE正常工作？

Hmmmm，很有意思。以前从没见过这个。不过，可以说隐藏上下文菜单并不是完全错误的。W3C必须说明禁用的控件：

• 禁用的控件不接收焦点
• 在选项卡导航中跳过禁用的控件
• 禁用的控件无法成功

关于接收焦点：

在HTML文档中，元素必须接收来自用户的焦点，才能变为活动状态并执行其任务

所以铬和FF显示的行为在我看来是有意义的

关于如何解决此问题的想法：

• 在输入元素的顶部放置一个透明元素，并在那里捕获事件（恶心）

• 使用

  z-index:-1

  将禁用的元素放在容器后面-但不确定这是否适用于不同浏览器

• 不要使用

  disabled

  属性，而是使用CSS样式和jQuery变通方法来防止提交这些控件的值

---

我认为后者是最好的建议。

嗯，很有趣。以前从没见过这个。不过，可以说隐藏上下文菜单并不是完全错误的。W3C必须说明禁用的控件：

• 禁用的控件不接收焦点
• 在选项卡导航中跳过禁用的控件
• 禁用的控件无法成功

关于接收焦点：

在HTML文档中，元素必须接收来自用户的焦点，才能变为活动状态并执行其任务

所以铬和FF显示的行为在我看来是有意义的

关于如何解决此问题的想法：

• 在输入元素的顶部放置一个透明元素，并在那里捕获事件（恶心）

• 使用

  z-index:-1

  将禁用的元素放在容器后面-但不确定这是否适用于不同浏览器

• 不要使用

  disabled

  属性，而是使用CSS样式和jQuery变通方法来防止提交这些控件的值

---

我认为后者是最好的建议。

我们选择了一种变通方法，因为他们似乎不是一种直接的方法。

---

我们决定在禁用的表单元素上添加一个图像，它响应正常的左键单击。

我们选择了一种变通方法，因为它们似乎不是一种直接的方法。

---

我们决定在禁用的表单元素上添加一个图像，它响应正常的左键单击。

我使用了一种更简单的方法，即只读取元素，而不是禁用它。如果“外观”可能会混淆用户，只需将“禁用”颜色与元素上的css匹配即可。我知道它与原始海报无关，但任何其他前来查看的人都可能受益。

我使用了一种更简单的方法，那就是只读取元素，而不是禁用它。如果“外观”可能会混淆用户，只需将“禁用”颜色与元素上的css匹配即可。我知道这与原始海报无关，但任何前来观看的人都可能受益。

谢谢Pekka。伪代码中输入元素周围的div就是我们使用的“transparant元素”（yuk:-）。我认为这可能是一个浏览器如何以不同方式解释z-index属性的问题，但事实证明，这不是问题所在problem@Stijn不，我所说的“高于”是指物理上高于，即

位置：绝对；宽度：xxxxx；高度：yyyy

并赋予其右键单击行为。这很难看，但如果您需要禁用

属性，这可能是最好的方法-我个人会选择删除它it@Pekka是的，透明分区的位置是：绝对；宽度：xxxxx；高度：yyyy属性。我忘了在信中提到他们example@Stijn是的，但在您的示例中，这是父div。内联元素的z-index总是比父元素高（除了
z-index:-1
，但我不相信这一点）。你需要一个单独的div@Pekka没什么区别--现在问题已经转移到IE上了，不过IE更有意义；-）谢谢你，佩卡。伪代码中输入元素周围的div就是我们使用的“transparant元素”（yuk:-）。我认为这可能是一个浏览器如何以不同方式解释z-index属性的问题，但事实证明，这不是问题所在problem@Stijn不，我所说的“高于”是指物理上高于，即
位置：绝对；宽度：xxxxx；高度：yyyy
并赋予其右键单击行为。这很难看，但可能是最好的