如何在事件处理程序中触发元素的默认事件？答案

【问题标题】：How can I trigger an element's default event within an event handler?如何在事件处理程序中触发元素的默认事件？
【发布时间】：2011-12-12 18:57:13
【问题描述】：

我有一个 HTML 按钮需要检查多个条件，如果它们通过，则允许执行默认操作。

以下在 Firefox 中有效，但在 IE 中失败。我在按钮上设置了一个点击处理程序：

Ext.get('send').on('click', handleSend, this, {
    preventDefault: true
});

如果不满足其中一个条件，则会弹出多个消息框之一。如果所有条件都满足，我从按钮中移除点击监听器，然后再次点击按钮：

Ext.get('send').un('click', handleSend, this);

Ext.getDom('send').click();

据我所知，它在 IE（可能还有其他浏览器）中失败，因为 click() 不是 DOM 元素的标准函数。

如果默认操作是简单的表单提交，我可以在检查通过后执行此操作，但我们使用的是带有侦听器的 Tapestry 4，它不会在正常的表单提交上执行。

我尝试过提交表单

tapestry.form.submit('composeForm', 'doSend');

但是doSend 监听器没有被调用。

有条件地允许默认事件是我想出的最佳解决方案，但有几个可能的选项：

JSFiddle 已添加

在这个jsfiddle中，默认动作是提交表单；当复选框未选中时，这会被阻止。选中后，它会删除处理程序，但对 click() 的调用在 IE 中不起作用。

有没有办法在 IE 中模拟点击？

更新

问题的另一个问题是我必须显示一个“你确定”对话框，因此为了给他们时间回答，必须停止该事件。如果他们单击确定，则需要执行默认操作。 JSFiddle 似乎没有像 MessageBox 这样的 ExtJS 小部件，所以我不确定如何演示这种行为。

在@Ivan 的建议下我尝试了

Ext.getDom('send').fireEvent('onclick');

但它返回 false，这意味着该事件正在某处被取消。然后我尝试了

var evt = document.createEvent("Event");
evt.initEvent('click', false, false);
var cancelled = Ext.getDom('send').fireEvent('onclick', evt);

但是 IE9 说 document.createEvent 不存在，尽管 MSDN 是这样说的。

【问题讨论】：

【解决方案1】：

如果所有条件都满足，我会从按钮中移除点击监听器并再次点击按钮：

不要。

您应该检查点击处理程序中的条件并在那里调用 stopEvent，如下所示：

Ext.get('send').on('click', handleClick);

function handleClick(e) {
    if (condition) {
        e.stopEvent();
    }
}

【讨论】：

【解决方案2】：

Internet Explorer 不支持点击。您应该改用 fireEvent 方法，例如

Ext.getDom('send').fireEvent('onclick');

这应该适用于 IE。对于其他浏览器，我猜点击是可以的。无论如何，如果我应该做类似的任务，我会尝试为 Tapestry 编写一个适配器并使用 Tapestry javascript 库。

【讨论】：

【解决方案3】：

Form 组件上有一个listener 参数；来自Tapestry 4 doc：

提交表单时调用的默认侦听器。调用仅当未调用另一个侦听器（成功、取消或刷新）时。

将此参数设置为我的侦听器方法，如下所示：

<binding name="listener" value="listener:doSend" />

导致 Tapestry 表单提交

tapestry.form.submit('myFormId');

触发监听器。

【讨论】：