如何模拟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>被点击。
方式二: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) | ? | ? | ? | ? |
方式三:createEvent + initEvent + dispatchEvent
document.createEvent用于创建事件,在DOM Level 2 的事件中就有HTMLEvents,MouseEvents,UIEvents事件类型。
initEvent()方法用于初始化通过DocumentEvent接口创建的Event的值。
dispatchEvent则是触发对应元素上面的某个事件。
如何模拟click事件,打开一个a标签链接?的更多相关文章
- 如何用按钮的click事件去触发a标签的click事件
在jQquery中,可以用如下方式触发input.a标签的click事件: <input id="my_input" /> <a id="my_a&qu ...
- 在做爬虫或者自动化测试时新打开一个新标签页,必须使用windows切换
在做爬虫或者自动化测试时,有时会打开一个新的标签页或者新的窗口,直接使用xpath定位元素会发现找不到元素,在firefox中定位了元素还是找不到, 经过多次发现,在眼睛视野内看到这个窗口是在最前面, ...
- 移动端click事件300ms延迟
移动端click 事件延迟300ms 一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟.也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应, ...
- 移动端click事件延迟300ms到底是怎么回事,该如何解决?
不管在移动端还是PC端,我们都需要处理用户点击,这个最常用的事件.但在touch端click事件响应速度会比较慢,在较老的手机设备上会更为明显(300ms的延迟). 问题由来 这要追溯至 2007 年 ...
- safari浏览器click事件要点击两次才有响应出现闪烁
闪烁问题 由于在iOS Safari上click事件存在300ms响应延时,所以为touch事件添加样式,会和click事件默认样式叠加而产生闪烁问题. 因为ios safari浏览器中对触摸事件的响 ...
- js 模拟window.open 打开新窗口
为什么要去模拟window.open() 打开一个 新的窗口呢,因为有些浏览器默认会拦截 window.open, 当需要函数中打开新窗口时,接可以使用a标签去模拟打开. /** * a模拟windo ...
- JavaScript区分click事件和mousedown(mouseup、mousemove)方法
在前端开发工作中,会遇到这样问题:针对同一个dom元素,即希望为它绑定click事件,又想该元素可以允许拖拽的效果.而使用拖拽的效果,我们一般就会用到mousedown,mousemove和mouse ...
- 移动端click事件延迟300ms的原因以及解决办法
这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点 ...
- 移动端click事件延迟300ms的原因以及解决办法[转载]
原文:http://www.bubuko.com/infodetail-822565.html 这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为 ...
随机推荐
- od的用法
一.功能 查看非文本文档的内容 二.用法 1.语法 od [-A RADIX] [-t TYPE] 文件名 2.选项与参数 -A: 指定偏移量的输出形式 d[size] :利用十进制(decimal) ...
- docker私有库搭建过程(Registry)
实验环境: CentOS7 1611 Docker 1.12.6 registry 2.0 1.安装并运行registry 安装: [root@docker01 ~]# docker pull r ...
- ByteBuffer源码分析
在进行数据传输的时候,往往需要使用到缓冲区,常用的缓冲区就是JDK NIO类库中提供的java.nio.Buffer,实现类如下: 在使用NIO编程时,最常用的是其中的ByteBuffer,本篇分析B ...
- php7 安装yar 生成docker镜像
Docker包含三个概念:(1)远程仓库即远程镜像库所有镜像的聚集地(不可进入操作).(2)本地镜像即从远程仓库拉取过来的镜像(3)运行起来的本地镜像叫做容器(分层的可操作)Docker使用:1.首先 ...
- dubbo结构及通信简介
一.导论 dubbo作为阿里开发优秀的rpc服务框架,现已广泛用于各大rpc项目之间的远程通信,虽然阿里现在已经没有维护dubbo的开发,但是其结构设计也是值得学习. 二.结构简介 这部分只是简单介绍 ...
- java--while、do while、for三种循环体
1.for可以记录执行次数: 2.while.do while的i放在sum的后面和for得到的执行次数和结果是一致的. 1.从执行结果来看,放在前面,虽然执行次数和i放在sum的后面是相同,但是结果 ...
- encodeURI与decodeURI
Global对象的ecodeURI方法可以对URI进行编码,与其类似的还有一个方法encodeURIComponent方法. 相应的对URI的解码方法也有两个:decodeURI.decodeURIC ...
- Mysql元数据分析
Mysql元数据分析 @(基础技术) 一.information_schema库 information_schema库中的表,保存的是Mysql的元数据. 官网元数据表介绍 InnoDB相关的表介绍 ...
- [图形学] Chp9 三维几何变换--栈处理函数与矩阵管理函数的区别
矩阵管理函数:glLoadIdentity()是把当前活动矩阵设置为单位矩阵. 栈处理函数:glPushMatrix()是将当前活动的变换矩阵复制一份,压入栈顶:glPopMatrix()是破坏当前活 ...
- tp框架-----Model模型层
1.Model模型层是用来做什么的呢? 主要是用来做操作数据库访问的.也就说明TP框架自带了一种访问数据库的方式,使用的是Model模型. 2.Model模型怎样使用呢? 要使用Model模型层访问数 ...