Question

我想我之前从未尝试过这样做...我在页面上有一个按钮。

<input type="submit" id="btn" value="Submit">

一个javascript函数，包括：

function clickit()
{
alert(document.getElementById('btn').value);
document.getElementById('btn').click();
}

使用Firefox，不会点击该按钮 - 即表单未提交。警报显示，但表单未提交。为什么Firefox不会点击按钮？

Answer 1

如果要将click事件绑定到div或INPUT元素以外的任何内容，请使用<INPUT>。如果{{1}}在表单正文中，则可能会遇到奇怪的问题。

Answer 2

如果您只需要提交带有按钮的表单，我建议您只使用带有点击处理程序的<div>元素而不是输入。它会给你一点灵活性。如果您这样做，那么您应该只需选择表单并使用submit() API提交表单。

如果您真的无法修改代码，并且无法在此处选择和提交，那么您需要如何使用jQuery和DOM。

jQuery方式：

$("my selector").trigger("click")

如果你在PhantomJS中运行，或者你有一个像焦点不熟悉的测试运行器这样的窗口，你可能会遇到焦点问题。在这种情况下，您可以使用：

$(<my selector>).triggerHandler(<my event>)

DOM API方式

这只会触发事件（相当于第一个例子）

// Create the event
var event = new CustomEvent("name-of-event", { "detail": "Example of an event" });

// Dispatch/Trigger/Fire the event
document.dispatchEvent(event);

您还可以使用实际的DOM方法模拟点击

var button = document.getElementById('my-button');
button.click();

Answer 3

为什么Firefox不会点击按钮？

我似乎记得，早期版本的Firefox并不允许出于安全原因而以这种方式调用侦听器。但是，我认为这些原因已经通过其他方式解决，现在您应该能够直接调用单击处理程序。以下提交Firefox 34中的表单：

<form onsubmit="alert('submitted!!')">
  <input name="foo" value="foo">
  <input type="submit" id="aa">
</form>
<br>
<button onclick="document.getElementById('aa').click();">Click the submit button</button>

调用表单的提交侦听器并提交表单，因此调用提交按钮的单击方法正在执行它应该执行的操作。

此方法并不适用于所有听众，点击是一种特殊情况，请参阅W3C DOM Level 3 Events Specification, §3.5 Activation triggers and behavior。

使用javascript和Firefox单击提交按钮

3 个答案: