a标签与click的关系

a标签的href属性与click事件的烦恼原文
当点击浏览器a标签的时候，浏览器的默认机制如下：

1、触发a的click事件
2、读取href属性的值
3、如果是URI则跳转
4、如果是javascript代码则执行该代码

做一个实验：

我们在一个html页面中写下如下代码：

<a href="http://www.baidu.com" id="a">这是一个a标签</a>

代码只有一个a标签，接下来我们使用js分别给a标签触发 touchstart、touchend、mousedown、mouseup、click 事件，测试一下能够是a标签跳转的都有哪些事件，我们的js代码如下：

// 事件数组var events = 'touchstart touchend mousedown mouseup click'.split(' ');var n = 0;// 开启定时器，每两秒钟为a标签触发相应事件var timer = setInterval(function(){    var event = new Event(events[n]);    document.getElementById('a').dispatchEvent(event); // 触发事件。    console.log(event.type);    n++;    if (n == events.length) {        clearInterval(timer);    }},2000);

注释：split() 方法用于把一个字符串分割成字符串数组。
语法：stringObject.split(separator,howmany)
separator必需 正则表达式 它指定按什么划分
howmany:可选
该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。
返回值：
一个字符串数组。该数组是通过在 separator 指定的边界处将字符串 stringObject 分割成子串创建的。返回的数组中的字串不包括 separator 自身。
但是，如果 separator 是包含子表达式的正则表达式，那么返回的数组中包括与这些子表达式匹配的字串（但不包括与整个正则表达式匹配的文本）。
**注释：如果把空字符串 (“”) 用作 separator，那么 stringObject 中的每个字符之间都会被分割。
注释：String.split() 执行的操作与 Array.join 执行的操作是相反的。**

我们可以看到，在控制台中每隔两秒钟就会打印出当前a标签触发的事件，当最后一个click事件触发时，a标签执行了跳转，跳转到了百度，这也就说明，a标签的跳转只有click事件能够触发，所以当点击a标签，发出请求的时候，浏览器会先去触发a的click事件，我们都知道，click事件在移动端会有300毫秒的延迟，所以这就是首页中列表点击迟钝的原因。

所以最后：大家以后开发移动端页面的时候，不要觉得你没有显示的去给某个元素绑定click事件就不会存在300毫秒延迟的问题，实际上a标签的跳转也会触发click事件，如果不加处理的话，也会有300毫秒延迟的问题，这对于用户体验是极其不好的。