IOS下自定义click事件使用alert引发的血案

使用过iscroll插件的同学都知道iscroll支持自定义事件，即在调用iscroll时参数赋值options.click = true。

接下来定义事件如：

             1 $clinicAppoint.on(‘click‘, function(event) {
 2if($(event.target).closest(‘#clinic-select‘).size() > 0 ) {
 3         alert($(event.target).closest(‘#clinic-select‘)[0].id);      
}elseif($(event.target).closest(‘#appoint-time‘).size() >0) { 7         alert($(event.target).closest(‘#appoint-time‘)[0].id)； 9     }
10   });

安卓和pc端模拟IOS都显示正常，但是IOS设备上诡异。

在IOS上会发现点击id="clinic-select"的元素及其子元素时,alert正常，接着点击id="appoint-time"的元素及其子元素时,诡异的现象出现了：

居然alert出"clinic-select",接着第二次点击id="appoint-time"的元素及其子元素时，alert又正常了。再点击id="clinic-select"的元素及其子元素时，

alert又不正常了。去掉 alert，一切又正常了，看来这是alert引起的血案。

IOS最终问题的根源：

在没有alert的情况的下，每次点击事件的顺序都是那么的和谐：touchstart->touchend; touchstart->touchend。

如果有alert，就影响了这个和谐的事件，事件是这样的：

第一次点击：touchstart->touchend->touchstart

第二次点击：touchend->touchstart->touchcancel

第三次点击：touchstart->touchend->touchstart

第四次点击：touchend->touchstart->touchcancel

。。。。。。

尼玛，这不和谐不要紧，要命是第一次点击最后的touchstart和第二次点击touchend事件是一个整体，被alert强制破坏了，

导致第二次点击事件总是第一次绑定的事件。直到第三次点击回到正常，第四次点击又郁闷了。。。。。

解决办法：

纠正alert引起的事件顺序错乱，让它们回到正常顺序，即：

第一次点击：touchstart->touchend

第二次点击：touchstart->touchend

。。。。。

            1 setTimeout(function(){
2       alert($(event.target).closest(‘#appoint-time‘)[0].id);
3 },0);

在alert之前先让浏览器UI进程按照顺序执行alert。就可以让事件回到正常顺序，即：

第一次点击：touchstart->touchend

第二次点击：touchstart->touchend

。。。。。

原文：http://www.cnblogs.com/liuyinlei/p/4875720.html