Question

This is a simple scenario, the click event is working fine in Firefox but not IE. Let’s go in the detail. I have a button which is like below:

<h:form id="theForm">
  <h:commandLink id="theButton" styleClass="button" action="#{theBean.doWork}"/>
</h:form>

When I try to invoke the click event of the button from JavaScript like this:

document.getElementById('theForm:theButton').click();

According to this thread, I am required to put the code below like this:

<script language="javascript" type="text/javascript">
  HTMLElement.prototype.click = function() {
    var evt = this.ownerDocument.createEvent('MouseEvents');
    evt.initMouseEvent('click', true, true, this.ownerDocument.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
    this.dispatchEvent(evt);
  }

But when I have this code in my JavaScript, it really work in Firefox, but not in IE anymore. May I know how can I make it work on both IE and Firefox?

Answer 1

Try:

if(!HTMLElement){
var HTMLElement = Element;
}
HTMLElement.prototype.click = function() {
    var evt = this.ownerDocument.createEvent('MouseEvents');
    evt.initMouseEvent('click', true, true, this.ownerDocument.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
    this.dispatchEvent(evt);
}

This should work for IE>=8, which uses Element to provide the same interface HTMLElement does in other browsers.