Javascript .click() 函数不起作用

Question

我正在从控制台在 Microsoft 平台上尝试 Javascript。 我所做的就是输入这样的表单值

document.forms[0][0].value="[email protected]";

当我搜索下一个按钮时，我也可以执行该文件

document.forms[0][3]

https://imgur.com/a/JUn9tKt

当我尝试使用 javascript 单击按钮时出现问题

document.forms[0][3].click()

https://imgur.com/a/b3cit0E

这里奇怪的是，当我手动单击“下一步”按钮时，它可以工作，但它似乎不适用于 JavaScript。 我做错了什么？

Answer 1

我尝试了一下，我注意到在什么条件下会发生这种情况。仅当您以编程方式输入值然后单击提交时才会出现错误。

问题不在于提交点击不起作用，问题在于在输入字段中输入电子邮件地址。电子邮件正在字段中输入，但通过脚本设置值可能不会触发底层 JavaScript。手动单击文本字段，然后运行单击功能即可。

我注意到，一旦您在输入字段之外单击，就会触发设置在输入字段中输入的电子邮件地址的 JavaScript。这让我相信它是一个在 JavaScript 中设置变量的事件监听器，而这个变量是发送到服务器的变量，而不是直接来自字段的输入。

为了解决这个问题，我们将首先进行一些逆向工程，看看它是如何工作的。幸运的是，JavaScript 非常简单，我们可以使用浏览器中方便的开发人员工具轻松查看所有事件侦听器：

我们需要做的就是尝试发送其中一些事件，看看哪些是有效的。

为了确定我发送的事件是否有效，我首先将单击事件发送到下一个按钮以使其显示错误，基本上完全按照您所做的故意使其失败，并尝试将事件发送到输入字段，直到出现错误由于手动单击输入字段旁边的错误也消失了，这表明它通过事件侦听器刷新了输入字段的 JavaScript 值。

我首先尝试发送焦点和模糊事件。这些不起作用，所以我尝试了 select 也不起作用。然后我尝试了更改事件并成功了！

这是我为此编写的 JavaScript 代码：

{
  const event = new Event("");
  event.initEvent("change");
  document.forms[0][0].value="[email protected]";
  document.forms[0][0].dispatchEvent(event);
  document.forms[0][3].click();
}

请注意，我将其放置在一个块中，这只是为了调整范围以避免重新声明该事件变量，因为人们可能希望多次将此脚本粘贴到控制台中。

简单来说，这就是我们所做的：

1. 创建一个新的 Event 对象（使用 Event 构造函数，因为 createEvent 已弃用）。
2. 将我们的事件初始化为“change”类型
3. 按照您最初尝试的方式设置该值。
4. 在输入字段上调度“change”事件，以触发 JavaScript 获取输入字段的值并将其存储在其变量中。
5. 单击下一步按钮。

另一个需要改进的地方是避免像这样重复：

{
  const email = "[email protected]"; // We separate this to make modifying easier.

  const form = document.forms[0], event = new Event("");
  event.initEvent("change");
  form[0].value = email;
  form[0].dispatchEvent(event);
  form[3].click();
}

如果您在学习 JavaScript 的过程中有任何其他问题或疑问，非常欢迎您寻求帮助！如果我的任何步骤不清楚，您可以告诉我，我尝试解释一下思考过程，以便您可以学习如何使用可用的工具来解决您遇到的问题，这样您不仅可以获得解决方案，而且可以理解该解决方案的来源。