javascript - 禁用的表单元素和 oncontextmenu 问题

Question

我们遇到了一个问题，即禁用的表单元素(输入、文本区域等)不会对右键单击操作(oncontextmenu 属性)作出 react 。启用表单元素后一切正常。请考虑以下伪代码:

<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 中右键单击文本框或日历元素时，没有任何反应。如果我们点击在元素之间(SOME_PADDING)，那么会出现右键菜单。

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

提前致谢!
静

编辑:正如 Pekka 所提到的，不响应右键单击的禁用表单元素确实有意义。真正的问题似乎是在 Firefox/Chrome 中单击禁用的表单元素时，它周围的 div 的 oncontextmenu 属性没有正确 react 。

EDIT2:可以在这里找到在线示例:http://jsbin.com/isite4/6 - 这适用于除 IE8 以外的所有浏览器。是否有任何建议的解决方法来强制 IE 正常运行？

Answer 1

嗯嗯，很有趣。以前从未见过这个。不过，可以说隐藏上下文菜单并不完全错误。 W3C 有 the following说一下禁用的控件:

• Disabled controls do not receive focus.
• Disabled controls are skipped in tabbing navigation.
• Disabled controls cannot be successful.

关于接收焦点:

In an HTML document, an element must receive focus from the user in order to become active and perform its tasks.

因此 Chrome 和 FF 显示的行为在我看来是有道理的。

关于如何解决它的想法:

• 在输入元素之上放置一个透明元素，并在那里捕获事件(糟糕)

• 使用 z-index: -1 将禁用的元素放在容器后面 - 不确定这是否适用于跨浏览器

• 不要使用 disabled 属性，而是使用 CSS 样式和 jQuery 解决方法来防止提交这些控件的值

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