禁用表单元素和 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 中的文本框或日历元素时，没有任何反应。如果我们单击元素之间 (SOME_PADDING)，则会出现右键菜单。
因此，似乎禁用表单上的右键单击操作在 Chrome 和 Firefox 中不起作用。以前有人经历过类似的行为吗？
预先感谢！
Stijn
编辑：正如 Pekka 提到的，禁用的表单元素对右键单击没有反应确实有意义。真正的问题似乎是在 Firefox / Chrome 中单击禁用的表单元素时，其周围 div 的 oncontextmenu 属性没有正确反应。
EDIT2：在线示例可以在这里找到： http://jsbin.com/isite4/6 - 这有效除 IE8 之外的所有版本。有什么建议的解决方法可以强制 IE 正常运行吗？
we have an issue where a disabled form element (input, textarea, ...) does not react to a right-click action (oncontextmenu attribute). Everything works fine when the form element is enabled. Please consider the following pseudo-code:
<div id="test" oncontextmenu="someFunction()">
<input id="textbox" type="text" disabled="disabled">
SOME_PADDING
<input id="calendar" type="image" disabled="disabled">
</div>
The real catch is it does not work in Chrome and Firefox, but it does work in IE8 and Opera.
When we right-click on the textbox or calendar elements in Chrome or Firefox, nothing happens. If we click in between the elements (SOME_PADDING) then the right-click menu does appear.
Hence it seems as if a right-click action on a disabled form does not work in Chrome and Firefox. Has anyone experienced a similar behaviour before?
Thanks in advance!
Stijn
EDIT: As mentioned by Pekka, a disabled form element not reacting to a right-click does make sense. The real issue seems to be the oncontextmenu attribute of the div around it not reacting properly when clicking on a disabled form element in Firefox / Chrome.
EDIT2: Online example can be found here: http://jsbin.com/isite4/6 - This works in all but IE8. Any proposed work-arounds to force IE to behave normally?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
嗯嗯，有趣。以前从未见过这个。不过，可以说隐藏上下文菜单并非完全错误。 W3C 有以下内容来说明禁用功能控制：
以及关于接收焦点：
因此，Chrome 和 FF 所表现出的行为在我看来是有道理的。
如何解决这个问题的想法：
在输入元素顶部放置一个透明元素，并在那里捕获事件（恶心）
使用
z-index: -1将禁用的元素放在容器后面 - 不确定这是否跨浏览器有效不使用
disabled属性，但使用 CSS 样式和 jQuery 解决方法来防止禁止提交这些控件的值后者将是最好的建议， 我认为。
Hmmmm, interesting. Never seen this before. It could be argued that it is not entirely wrong to hide the context menu, though. The W3C has the following to say about disabled controls:
and about receiving focus:
So the behaviour shown by Chrome and FF kind of makes sense IMO.
Ideas for how to work around it:
Put a transparent element on top of the input element, and catch the event there (yuck)
Use
z-index: -1to put the disabled element behind the container - not sure whether this works across browsers thoughDo not work with the
disabledattribute, but use CSS styling and a jQuery workaround to prevent those controls' values from being submittedThe latter would be the best suggestion, I think.
我们选择了一种解决方法，因为他们似乎不是一个直接的方法。
我们决定在禁用的表单元素上添加一个图像，以响应正常的左键单击。
We opted for a work-around, as their doesn't seem to be a straight-forward approach.
We decided to add an image over the disabled form element, that responds to a normal left-click.
我使用了一种更简单的方法，那就是只读该元素而不是禁用它。如果“外观”可能会让您的用户感到困惑，只需将“禁用”颜色与元素上的 css 相匹配即可。我知道这与原始海报无关，但任何其他来看的人都可能会受益。
There is a simpler way that I have used and that was to readonly the element instead of disabling it. If the 'look' might confuse your users, just match the "disabled" colours with css on the element. I know it is not relevant to the original poster but anyone else who comes looking might benefit.