如何模拟click事件，打开一个a标签链接？

Posted 2020-09-30 js-coder

在项目开发过程中，我们经常会碰到通过接口返回一个地址，同时在新的tab页面打开一个网址的情况，最直观的想法就是通过window.open(url)的方式，打开一个新的页面，但是大部分浏览器会遭遇拦截。因为大部分现代的浏览器（泛指 Chrome / Firefox / IE 10+ / Safari）都默认开启了阻止弹出窗口的策略，原因是 window.open 被广告商滥用，严重影响用户的使用。这个阻止弹出窗口的操作，并不是直接封杀 windw.open()，而是会根据用户的行为来判断这次 window.open() 是否属于流氓操作。

但是对用户来说，不能要求用户都来通过拦截。何况当出现拦截时，很多小白根本不知道发生了啥，不知道在哪里看被拦截的页面，百思不得其解，因此我们还是要通过代码来解决这个问题。

方式一：jQuery来帮忙

大部分前端开发都对jQuery比较熟悉，所以我们先以jQuery解决这个问题。jquery是提供了模拟click事件的方法的，$(selector).click()。只不过这里我们要注意的是当要触发a标签点击的时候，<a>标签内一定要有内容，并且要模拟里面的内容被点击而不是<a></a>被点击。

jsfiddle代码地址

方式二：HTMLElement.click()

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click

按照文档里面的介绍，htmlElement.click()是用来模拟click的方法。这种方法的兼容性如下。

PC

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	20[3]	(Yes)	5[1]	(Yes)	(Yes)[2]	6[3]
[email protected] (limited)	(Yes)	(Yes)	4	(Yes)	12.10	(Yes)
[email protected] (full)	(Yes)	(Yes)	4	(Yes)	No support	(Yes)

 

Mobile

Feature	android	Chrome for Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	No support	?	(Yes)	?	?	?	?

 

jsfiddle代码地址

方式三：createEvent + initEvent + dispatchEvent

document.createEvent用于创建事件，在DOM Level 2　的事件中就有HTMLEvents，MouseEvents，UIEvents事件类型。

initEvent()方法用于初始化通过DocumentEvent接口创建的Event的值。

dispatchEvent则是触发对应元素上面的某个事件。

参考自stackoverflow

jsfiddle代码地址

方式四：后端重定向

这种方式需要后端协作，先提供一个接口地址，前端通过a标签跳转到该地址，后端通过运算之后，直接重定向到目标地址，这也是方便快捷的方法。