Question

这是一个简单的场景，点击事件在Firefox中运行正常但不是IE。让我们详细介绍一下。我有一个按钮，如下所示：

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

当我尝试从JavaScript调用按钮的click事件时：

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

根据这个thread，我需要像下面这样输入代码：

<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);
  }

但是当我在我的JavaScript中使用此代码时，它确实可以在Firefox中运行，但不再在IE中运行了。我可以知道如何在IE和Firefox上运行它？

Answer 1

尝试：

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);
}

这适用于IE＆gt; = 8，它使用Element在其他浏览器中提供相同的接口HTMLElement。

Answer 2

您可以使用jQuery尝试：

$("#theButton").click(function() {alert("Handler for .click() called.");});

Answer 3

错过了分号 - IE不是那样的

<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);
  };

是的，请务必修补HTMLElement

var HTMLElement =HTMLElement===undefined?Element:HTMLElement;

为什么点击事件在Firefox中工作正常但不是IE

3 个答案: