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

在项目开发过程中,我们经常会碰到通过接口返回一个地址,同时在新的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标签跳转到该地址,后端通过运算之后,直接重定向到目标地址,这也是方便快捷的方法。

时间: 2024-10-25 15:45:54

如何模拟click事件,打开一个a标签链接?的相关文章

VC++ 模拟&quot;CLICK事件&quot;关闭指定窗口

今天修改一个工具时遇到一个有意思的问题,打开某个窗口时弹出一些不相关的窗口,需要用户自己去手动点击后才能继续,保证不了自动处理,现在讲解决方式记录一下,如下 主要使用windows提供的FindWindow和FindWindowEx,参考代码如下 wchar_t szClassName[256]; //用于记录窗口标题 StringCchPrintf(szClassName, 256, L"Client%02d - VMCalc", m_Index + 1); HWND hwndDlg

如何用按钮的click事件去触发a标签的click事件

在jQquery中,可以用如下方式触发input.a标签的click事件: <input id="my_input" /> <a id="my_a" href="http://www.XXXX.html"></a> $("#my_input").click(function () { //do something }); 或 $("#my_a").click(functi

点击事件打开一个网址

var openWeb =function(url){ const exec = require('child_process').exec; exec('start /max "" "'+url + '"'); return false; } 点击事件,输入一个url地址:

模拟鼠标事件

使用以下三行代码就可以使用模拟鼠标事件了 var oCreateEvt = $D.createEvent('MouseEvents');//模拟鼠标对象 oCreateEvt.initMouseEvent('click',true,true,document.defaultView,0,0,0,0,0,false,false,false,false,0,null); $(id).dispatchEvent(oCreateEvt); 比较方便的应用可以利用模拟鼠标事件写一个键盘操作系统,具体实现

移动端click事件延迟300ms的原因以及解决办法

这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点的问题.这当中最出名的,当属双击缩放(double tap to zoom).这也是会有上述 300 毫秒延迟的主要原因. 当用户一次点击屏幕之后,浏览器并不能立刻判断用户是要进行双击缩放,还是想要进行单击操作.因此,iOS Safari 就等待 300 毫秒,以判断用户是否再次点击了屏幕. 于是,

移动端click事件延迟300ms的原因以及解决办法[转载]

原文: 这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点的问题.这当中最出名的,当属双击缩放(double tap to zoom).这也是会有上述 300 毫秒延迟的主要原因. 当用户一次点击屏幕之后,浏览器并不能立刻判断用户是要进行双击缩放,还是想要进行单击操作.因此,iOS Safari 就等待 300 毫秒,以判断用户是否再次点击了屏幕.

手机浏览器下IScroll中click事件

产品的h5页面几乎都使用了iscroll插件,如果a标签在iscroll里,在部分手机浏览器中会出现无法点击的情况,不管是绑定click事件还是使用a标签的href属性.href属性偶尔还会能点击,click事件完全不能. 如果用button或input代替a,都能响应click事件. 如果用微信内置浏览器,都能响应click事件(nubia除外).QQ浏览器也能响应. 也就是出现此问题跟手机本地浏览器,iscroll,a标签都有关系. iScroll uses various techniqu

如何使用button在tab中新建打开一个链接页

在APPBOX某页中如何使用button按钮打开一个新的链接页.比如说百度.谷歌等 在后台的单击事件中使用以下语句即            string url = "DownloadImage.aspx?ids=" + ids;                  string js = @"window.open('" + OriginalPageName + "','_blank')";//打开新页面                  Pag

Firefox下代码触发a标签的click事件无效

通过一次导出功能是让自己如何一步一步掉坑最后又是怎么爬起来的 在页面中通过document.createElement('a');创建一个a标签,然后给a标签的href属性赋url,通过代码触发a标签的click事件请求后台,在Chrome浏览器中请求正常,但是在Firefox中始终无效,debugger发现代码也走到了a.click()方法,但是就是没反应.代码如下: $.ajax({ url: Config.ApiUrl + "TZTZ/DowloadFile", type: &q