使用 JavaScript 模拟点击

  1. 在 JavaScript 中使用 click() 模拟点击事件
  2. 在 JavaScript 中实现一个模拟自定义点击事件的函数
  3. 结论

在 JavaScript 中模拟点击意味着点击事件将在 HTML 元素上自动触发,而无需用户手动点击。在创建交互式网页时,这种模拟点击功能可以在各种情况下派上用场。

为了实现模拟点击功能,我们可以使用 JavaScript 编程语言提供的内置 click() 功能,或者使用 MouseEvent 类创建我们自己的 click 事件。

让我们看看如何在本文中实现这两种方式。

在 JavaScript 中使用 click() 模拟点击事件

click() 方法在 JavaScript 中触发点击事件。此事件在没有用户交互的情况下触发。

click() 可以与支持元素一起使用,例如 input。此方法基于称为事件冒泡的概念工作。

在事件冒泡中,事件冒泡到文档树中较高的元素,然后在触发时触发它们的单击事件。

在下面的 HTML 文档中,我们有一个输入标记、一个复选框和一个将 JavaScript 文件链接到 HTML 文档的脚本标记。

输入标签的 id 为 myCheck 和一个名为 mouseover 的事件,它将函数 myFunction 作为输入。

<body>
    <input type="checkbox" id="myCheck" onmouseover="myFunction()">
    <script src="./index.js"></script>
</body>

myFunction 在 JavaScript 文件中定义。在这个函数中,我们通过 document.getElementById() 函数获取我们使用它的 id 创建的输入标签。

然后我们将 click() 函数添加到该输入。

function myFunction() {
    document.getElementById("myCheck").click();
}

在浏览器上执行此代码后,这是你将获得的输出。

模拟点击事件

这种方法的缺点是它只适用于某些 HTML 元素。要了解有关 click() 函数的更多信息,请访问 MDN 文档。

然而,如果你想模拟点击像锚 <a> 标签或类似的链接,你必须编写你的函数来模拟 JavaScript 中的点击。click() 函数将不起作用。

在 JavaScript 中实现一个模拟自定义点击事件的函数

要在 JavaScript 中模拟自定义点击事件,我们必须实现我们的函数。为此,我们将使用 MouseEvent API 来添加 click 事件。

在创建函数之前,让我们首先创建 HTML 文档。该 HTML 文档将包含一个锚标记和一个指向 JavaScript 文件的链接。

我们在锚点 <a> 标记上添加了一个 link 的 id,以访问我们的 JavaScript 文件中的这个 HTML 元素。我们还将此标签命名为 Click Me(你可以为此标签提供任何名称)。

HTML 文档如下所示。

<body>
    <a href="#" id="link">Click Me</a>
    <script src="index.js"></script>
</body>

要在 JavaScript 中创建一个新的鼠标事件,我们必须创建一个 MouseEvent 类的对象。MouseEvent 构造函数采用两个参数 typeArgmouseEventInit

 event = new MouseEvent(typeArg, mouseEventInit);

typeArg 是它要创建的事件的名称。在这种情况下,它是一个 click 事件。

mouseEventInit 是一个字典,它本身可以接受各种参数,例如 bubblesviewclientXmetaKey 等。要了解有关 MouseEvent 构造函数和各种参数的更多信息,请在 MDN 网站上阅读其文档。

对于我们的示例,我们只在 mouseEventInit 字典中传递了三个键值对作为参数。让我们看看我们传递给 mouseEventInit 的三个参数的含义。

  1. bubbles:在事件冒泡中,事件将从最里面的元素开始执行,然后一直到它的祖先(父母)。它需要一个布尔值。

    我们已将其设置为 false,因为我们将在单个元素上注册此事件;锚标记。该元素也不以嵌套方式存在。

  2. cancelable:这告诉浏览器我们正在执行的事件是否可以被取消。它也需要一个布尔值。

  3. viewMouseEvent 也接受 view,它是 UIEvent 的一部分。默认设置为 null,但我们也可以将其值设置为 window

    这将在浏览器窗口内执行事件。

    var simulateClick = new MouseEvent('click', {
        bubbles: false,
        cancelable: true,
        view: window,
    });
    
    var url = document.getElementById('link');
    url.addEventListener('click', () => console.log('clicked'))
    url.dispatchEvent(simulateClick)
    

使用 MouseEvent 类创建的自定义事件将存储在 simulateClick 变量中。

为了在我们的 JavaScript 文件中获取锚标签,我们将使用 document.getElementById 方法并在 id 中传递锚标签 link。然后我们将该元素存储在一个名为 url 的变量中。

现在我们已经在 J​​avaScript 文件中引用了锚标记,并且我们的自定义点击事件也准备好了,是时候将它添加到锚标记中了。

为了启动我们创建的模拟点击事件,我们将在 url 变量上使用 dispatchEvent 方法,然后将其中的 simulateClick 作为参数传递。

为了确保我们创建的 simulateClick 事件正常工作,我们将使用 addEventListenerurl 变量上添加另一个 click 事件。然后我们将控制台记录一个语句。

这行代码是检查我们创建的事件是否已经被调度。它可以随时删除。

应该在执行我们的自定义 simulateClick 事件之前添加此事件。否则,你将不知道 simulateClick 事件是否已成功执行。

上面的代码将产生以下输出:

模拟自定义点击事件

结论

本文演示了两种在 JavaScript 中模拟点击事件的方法。一种方法是使用名为 click() 的内置函数,另一种方法是创建并执行我们的自定义点击事件 simulateClick

相关文章 - JavaScript Event

  • 在 Onclick 事件中调用多个 JavaScript 函数
  • 在 JavaScript 中检测键盘输入事件
  • 用 JavaScript 在 iframe 中实现一个 onload 事件
  • 相关文章 - JavaScript Click

  • 在 Onclick 事件中调用多个 JavaScript 函数
  • 在 JavaScript 中检测键盘输入事件
  • 用 JavaScript 在 iframe 中实现一个 onload 事件