AppCan JS扩展2.0之点击事件
在移动终端中，目前Android和iOS平台采用的都是WebKit内核。在处理点击事件时，都会有一些延时，即用户手指离开屏幕到onclick触发，需要一段时间，这就造成了体验滞后。为了解决这个问题，我们需要通过监听用户手指的按下、移动和抬起人为的模拟Onclick事件。AppCan UI2.0框架提供了zy_click.js文件，里面对这个功能进行了封装，还有相关视频。我们来讲解如何使用zy_click.js。构建一个新工程Demo022V001.zip范例,在index_content.html中添加一个默认纵向容器，为每一个条目添加ID，并为容器加上外边距。效果如下：
代码：
我们可以看到目前在容器中有三个条目，接下来我们使用zy_click.js为其添加点击事件和效果。首先在head部分添加对zy_click.js的引用。
接着在
var c=new zyClick('item1',function(me){
alert('Clicked');
},'btn-act');
上述代码中，我们创建了一个新的zyClick对象，此对象绑定到了item1这个DOM元素上，同时我们还设定了一个回调函数来处理模拟的Click事件，最后我们还设定了一个btn-act的类，当用户按下item1时，会在item1的className中自动添加，来实现一个按下的效果，当移动或抬起时，会自动从item1的className中删除，来恢复原始状态。我们点击Item1可以看到弹出了系统提示框。但是按下的效果并没有出现，这是由于我们没有引用btn-act 这个类所在的CSS文件。在head部分添加对ui-btn.css引用。再次点击item1，我们会看到item1产生了内凹效果。至此，我们就为Item1添加了模拟的按键处理。但是上述写法处理静态页面时没有问题，但是在处理动态拼装的内容页面时，就会比较繁琐，需要先拼装页面，然后再循环为每一个条目创建对象。我们提供了另一中机制来降低难度。这就是zy_touch 函数，它位于zy_control.js中。我们看一下zy_touch的实现代码
functionzy_touch(c, f){
var t = event.currentTarget;
if (!t.zTouch) {
t.zTouch = new zyClick(t, f, c);
t.zTouch._touchStart(event);
}
}
上述代码很简单，zy_touch函数有两个参数第一个参数是按下时的效果类，就是刚才看到的btn-act。第二个参数是回调函数，即模拟按键事件产生时调用的函数。接着我们获得了触摸事件的目标DOM对象，判断对象中是否已经有创建好的zyClick对象，如果没有则创建一个。应为此时创建zyClick对象时，按下事件已经发生，因此我们在后一行，直接调用zyClick中封装的触摸事件处理函数。通过这个方法，我们不需要再专门去创建一个zyClick对象，而是在用户按下条目时动态创建，没有按下条目时，我们是不会新建条目的。范例
上述代码中，程序动态拼接了getDetail函数，并为其设定了两个参数。对于这种情况，zyClick 已经加入了处理机制，我们看修正后的代码
onclick='getDetail('123','444')'>条目3
上述代码可以看到，我们同时在ITEM3中添加了ontouchstart和onclick的处理代码，当zy_touch中创建的zyClick对象初始化时，会自动获取ITEM3的onclick属性，并把其从ITEM3中删除，这样，当正式按键事件产生时，由于onclick事件已经被删除，则不会有任何反应。如果模拟按键时间产生时，会自动运行Onclick事件注册的代码。使用这种写法，会跟开发者常见习惯相符合，而不需要专门在写代码为每个条目进行处理。
另外，在PC Chrome模拟器中调试时，由于没有ontouchstart事件，所以不会执行zy_touch 函数，但onclick事件会正常产生。如果需要在PC调试，可以使用onmousedown事件替换ontouchstart事件来处理。