Javascript 模拟点击事件(点击链接与html点击) 兼容IE/Firefox

2023年6月11日上午8:39 • JavaScript

这里是Javascript模拟点击事件（点击链接与HTML点击）兼容IE/Firefox的完整攻略，下面进行详细讲解，并提供两条示例说明。

前置知识

在了解模拟点击事件之前，需要先了解以下概念：

事件冒泡：指当一个元素触发某个事件（例如点击事件）时，此元素的父元素也会受到影响并触发同样的事件。
事件捕捉：指当一个元素触发某个事件时，此元素的父元素可以先于此元素捕捉到并处理同样的事件。
DOM节点：指网页中的文档元素，包含html，head，body等。

模拟点击链接

实现点击链接的模拟事件调用方式如下：

var linkElement = document.getElementById("linkId");
if (document.createEvent) {
  var event = document.createEvent("MouseEvents");
  event.initEvent("click", true, true);
  linkElement.dispatchEvent(event);
} else {
  linkElement.click(); 
}

在上述代码中，创建了一个 event 对象，使用 initEvent() 方法初始化该对象，并使用 dispatchEvent() 方法将该事件对象分配给指定元素。如果浏览器不支持 createEvent() 方法，可以直接调用元素的 click() 方法来模拟事件。

下面提供一个完整的示例：

<!DOCTYPE html>
<html>
<head>
  <title>模拟点击链接事件</title>
</head>
<body>
  <a id="linkId" href="http://www.example.com">点击我</a>
  <script type="text/javascript">
    var linkElement = document.getElementById("linkId");
    if (document.createEvent) {
      var event = document.createEvent("MouseEvents");
      event.initEvent("click", true, true);
      linkElement.dispatchEvent(event);
    } else {
      linkElement.click(); 
    }
  </script>
</body>
</html>

在该示例中，点击页面中的链接后，会跳转到指定的网页。

模拟HTML元素的点击

除了模拟点击链接外，我们还可以模拟HTML元素的点击，使用方式如下：

var htmlElement = document.getElementById("elementId");
if (document.createEvent) {
  var event = document.createEvent("HTMLEvents");
  event.initEvent("click", true, true);
  htmlElement.dispatchEvent(event);
} else {
  htmlElement.click(); 
}

在上述代码中，声明了一个 event 变量，然后使用 initEvent() 方法初始化该变量，并使用改变量来通过 dispatchEvent() 将该事件指派到指定元素。如果不支持 createEvent() 方法，可以直接调用元素的 click() 方法来模拟事件。

这里也提供一个示例：

<!DOCTYPE html>
<html>
<head>
  <title>模拟HTML元素的点击事件</title>
  <style>
    #elementId {
      width: 100px;
      height: 100px;
      background-color: #f00;
    }
  </style>
</head>
<body>
  <div id="elementId"></div>
  <script type="text/javascript">
    var htmlElement = document.getElementById("elementId");
    if (document.createEvent) {
      var event = document.createEvent("HTMLEvents");
      event.initEvent("click", true, true);
      htmlElement.dispatchEvent(event);
    } else {
      htmlElement.click(); 
    }
  </script>
</body>
</html>

在该示例中，页面中的一个红色方形div，在页面加载后会自动触发点击事件。