在项目开发过程中，我们经常会碰到通过接口返回一个地址，同时在新的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]
input@file (limited) (Yes) (Yes) 4 (Yes) 12.10 (Yes)
input@file (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代码地址

如何模拟click事件，打开一个a标签链接？的更多相关文章

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

    在jQquery中,可以用如下方式触发input.a标签的click事件: <input id="my_input" /> <a id="my_a&qu ...

  2. 在做爬虫或者自动化测试时新打开一个新标签页，必须使用windows切换

    在做爬虫或者自动化测试时,有时会打开一个新的标签页或者新的窗口,直接使用xpath定位元素会发现找不到元素,在firefox中定位了元素还是找不到, 经过多次发现,在眼睛视野内看到这个窗口是在最前面, ...

  3. 移动端click事件300ms延迟

    移动端click 事件延迟300ms 一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟.也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应, ...

  4. 移动端click事件延迟300ms到底是怎么回事，该如何解决？

    不管在移动端还是PC端,我们都需要处理用户点击,这个最常用的事件.但在touch端click事件响应速度会比较慢,在较老的手机设备上会更为明显(300ms的延迟). 问题由来 这要追溯至 2007 年 ...

  5. safari浏览器click事件要点击两次才有响应出现闪烁

    闪烁问题 由于在iOS Safari上click事件存在300ms响应延时,所以为touch事件添加样式,会和click事件默认样式叠加而产生闪烁问题. 因为ios safari浏览器中对触摸事件的响 ...

  6. js 模拟window.open 打开新窗口

    为什么要去模拟window.open() 打开一个 新的窗口呢,因为有些浏览器默认会拦截 window.open, 当需要函数中打开新窗口时,接可以使用a标签去模拟打开. /** * a模拟windo ...

  7. JavaScript区分click事件和mousedown（mouseup、mousemove）方法

    在前端开发工作中,会遇到这样问题:针对同一个dom元素,即希望为它绑定click事件,又想该元素可以允许拖拽的效果.而使用拖拽的效果,我们一般就会用到mousedown,mousemove和mouse ...

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

    这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点 ...

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

    原文:http://www.bubuko.com/infodetail-822565.html 这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为 ...

随机推荐

  1. Ruby中文乱码问题

    中文乱码问题 解决方法为只要在文件开头加入 # -*- coding: UTF-8 -*-(EMAC写法) 或者 #coding=utf-8 就行了. 源代码文件中,若包含中文编码,则需要注意两点: ...

  2. Ext表格分页

    pageSize:配置表格或者数据的数量, autoLoad: { start: 0, limit: 2 }:自动加载时候的参数, proxy中:params: {start: 0,limit: 2} ...

  3. 配置lnmp

    ===================准备篇: 1.配置防火墙,开启80端口.3306端口vi /etc/sysconfig/iptables-A INPUT -m state –state NEW ...

  4. Docker Daemon 参数最佳实践

    1. Docker Daemon 配置参数 限制容器之间网络通信 在同一台主机上若不限制容器之间通信,容器之间就会暴露些隐私的信息,所以推荐关闭 docker daemon –icc=false 使用 ...

  5. 可选参数、命名参数、.NET的特殊类型、特性

    1.可选参数和命名参数    1.1可选参数        语法:            [修饰符] 返回类型 方法名(必选参数n,可选参数n)        注意:            1.必选参 ...

  6. 将逗号分隔 的字符串转化成List

    将逗号分隔 的字符串转化成List List<String> parIdListTmp = new ArrayList<String>(); String parIdArray ...

  7. el表达式字符串使用总结

    el表达式截取 逗号后面的字符串${fn:substringAfter(strVar,',' )} el表达式判断字段长度<c:if test="${fn:length(strVar) ...

  8. Object-C知识点 (四) 性能优化

    #pragma mark - 性能优化 1. 行高一定要缓存 缓存行高是解决性能优化的最佳途径(除非刷新频率已经很高了,否则一定要缓存)2. 尽量减少计算,所有需要素材提前计算好3. 控件不要设置圆角 ...

  9. web拖动条显示

    <!DOCTYPE html"> <html> <head> <title>滚动条拖动评分的JS效果</title> <st ...

  10. JavaScript学习笔记（散）——继承、构造函数super

    构造函数中的super 今天看<JavaScript设计模式与开发实践>时,在书中看到一段代码出现super语句,第一次看到这个关键字,所以上网查了下它的作用,发现这个关键字是来自java ...