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的事件再让遮罩层消失。