不同设备的click

1. onclick是绑定事件，click是方法

click本身是方法作用是触发onclick事件，只要执行了元素的click()方法，就会触发onclick事件。如上诉代码所示，当点击'ee'按钮时,会触发'dd'的onclick事件(正常来说得按'dd'按钮才触发'dd'的onclick事件)，原因就是因为点击'ee'按钮时,代码内部调用了'dd'的click()方法，从而触发了'dd'的onclick事件。

$("#btn1").click(function(){
    $("#btn2").click();
});

2. click与tap

click为了能区分单击与双击在每次点击之后加了300ms的延迟，但是这种延迟会造成反应迟钝的感觉。为了解决这一问题，可以使用zepto的tap事件，singleTap和doubleTap 分别代表单次点击和双次点击。在使用zepto框架的tap来移动设备浏览器内的点击事件，来规避click事件的延迟响应时，有可能出现点透的情况，即点击会触发非当前层的点击事件。

github上有一个叫做fastclick的库，它也能规避移动设备上click事件的延迟响应，fastclick
将它用script标签引入页面（该库支持AMD，于是你也可以按照AMD规范，用诸如require.js的模块加载器引入），并且在dom ready时初始化在body上。实践开发中发现，当元素绑定fastclick后，click响应速度比tap还要快一点点。

3. touch事件

touch事件touch是针对触屏手机上的触摸事件。现今大多数触屏手机webkit内核提供了touch事件的监听，让开发者可以获取用户触摸屏幕时的一些信息。其中包括：touchstart,touchmove,touchend,touchcancel 这四个事件，touchstart,touchmove,touchend事件可以类比于mousedown，mouseover
，mouseup的触发。

touchstart ：当手指触摸到屏幕会触发；
touchmove ：当手指在屏幕上移动时，会触发；
touchend ：当手指离开屏幕时，会触发；
touchcancel：许多人不知道它在什么时候会被触发而忽略它，其实当你的手指还没有离开屏幕时，有系统级的操作发生时就会触发touchcancel，例如alert和confirm弹框，又或者是android系统的功能弹窗。

在一个移动端设备，手指点击一个元素，会经过：touchstart --> touchmove -> touchend --》click 几个过程。

4. 点透问题

$('.div1').addEventListener('touchstart', function(e) {
    $('.div1).style.display = 'none';
})
$('.div2).onclick = function() {
    console.log('click事件')
}

其中div1覆盖在 div2 之上，按理说点击 div1 的时候，div1 会阻挡所有的事件，事件不会传递给 div1，当点击 div1 的时候，实际上 div2 也发生了点击事件，即上面的输出结果为 div1 消失，输出 ‘click事件’ 莫名被点击了, 这就是点透。

这是因为：当手指触摸到屏幕的时候，系统生成两个事件，一个是touch 一个是click，touch先执行，touch执行完成后，A从文档树上面消失了，而且由于移动端click还有延迟200-300ms的关系，当系统要触发click的时候，发现在用户点击的位置上面，目前离用户最近的元素是B，所以就直接把click事件作用在B元素上面了。

那么怎么去解决这个问题呢？其实系统提供了先触发的touch事件去取消系统生成的click事件，所以只要在touch事件的某个处理函数中执行 e.preverDefault即可，一般我们在touchend中执行：

$('.div1').addEventListener('touchstart', function(e) {
    $('.div1).style.display = 'none';
    e.preventDefault();
})

其他解决方案：1. 使用系统的click事件; 2. 党touch事件发生后持续大于300ms的事件再让遮罩层消失。

不同设备的click