首页 > 代码库 > a标签与click的关系
a标签与click的关系
当点击浏览器a标签的时候,浏览器的默认机制如下:
1、触发a的click事件
2、读取href属性的值
3、如果是URI则跳转
4、如果是javascript代码则执行该代码
下面我们一起来做一个实验:
我们在一个html页面中写下如下代码:
1
|
<a href=http://www.mamicode.com/"http://www.baidu.com" id="a">这是一个a标签</a>
|
代码只有一个a标签,接下来我们使用js分别给a标签触发 touchstart、touchend、mousedown、mouseup、click 事件,测试一下能够是a标签跳转的都有哪些事件,我们的js代码如下:
1
|
// 事件数组
|
我们可以看到,在控制台中每隔两秒钟就会打印出当前a标签触发的事件,当最后一个click事件触发时,a标签执行了跳转,跳转到了百度,这也就说明,a标签的跳转只有click事件能够触发,所以当点击a标签,发出请求的时候,浏览器会先去触发a的click事件,我们都知道,click事件在移动端会有300毫秒的延迟,所以这就是首页中列表点击迟钝的原因,而我之前一直认为的是,a标签的跳转与click事件无关。我怎么这么low呢?????????
所以最后:大家以后开发移动端页面的时候,不要觉得你没有显示的去给某个元素绑定click事件就不会存在300毫秒延迟的问题,实际上a标签的跳转也会触发click事件,如果不加处理的话,也会有300毫秒延迟的问题,这对于用户体验是极其不好的。
来自http://hcysun.me/2015/11/26/a%E6%A0%87%E7%AD%BE%E7%9A%84href%E5%B1%9E%E6%80%A7%E4%B8%8Eclick%E4%BA%8B%E4%BB%B6%E7%9A%84%E7%83%A6%E6%81%BC/#more
a标签与click的关系
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。