问题
I wrote some code which allows me to disable/enable checkboxes when I right-click them. It works in IE but not in Chrome or Firefox.
rightClickFunc: function (e)
{
var obj;
if ($.browser.msie) obj = event.srcElement;
else obj = e.target;
stuff.disableEnableObject(obj);
return false;
},
disableEnableObject: function (o)
{
if (o.getAttribute("disabled") == null)
$('#'+o.id).attr("disabled", "disabled");
else $('#'+o.id).removeAttr("disabled");
}
How can I get the same functionality in Chrome as IE? The problem seems to be that right clicking on a disabled item in chrome does open the context menu (right click menu).
I made a sample of the code - see http://jsfiddle.net/e72M6/. Run it in IE and chrome to see the difference. (IE can enable the boxes, Chrome cannot).
I want the other browser to have the same functionally as IE. So the boxes can be enabled.
回答1:
It would be a lot of work, but technically when you disable the element, you could stack a transparent element on top of it (so the user can't see it), same size/shape, and listen for that click event. When it's enabled, hide that stacked element.
Here's something to get you started: http://jsfiddle.net/8dYXd/2/
It uses this structure:
<span>
<input id='a' type='checkbox' disabled="disabled" />
<span class="disabled-detector"></span>
</span>
And this CSS:
span {
position: relative;
}
span.disabled-detector {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
}
input+span.disabled-detector {
display: none;
}
input[disabled]+span.disabled-detector {
display: inline;
}
Notice how you can still "click" on disabled elements.
You'll have to update it to make sure the click
(or contextmenu
) event targets both the input
and the transparent element. Technically, you could just use the parent <span>
- give it a special class, and listen for click
events on that. The events will bubble up from its descendants, so that should be fine.
回答2:
According to the spec disabled elements should not respond to click events.
What you want to do is overlay an invisible (opacity: 0
) element on top of this and use it as a proxy for your events. Just bear in mind that some old browsers don't understand opacity
.
回答3:
It works to disable the element, but not to re-enable it. This is because disabled elements do not fire mouse events. I do not think that there is a way for you to get this to work in all browsers.
来源:https://stackoverflow.com/questions/16174527/how-to-disable-enable-a-checkbox-on-right-click-in-chrome-and-firefox