zoukankan      html  css  js  c++  java
  • IOS下自定义click事件使用alert的bug

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

    接下来定义事件如:

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

    安卓和pc端模拟显示正常,在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

    。。。。。

    血的教训:不要用alert。

  • 相关阅读:
    第三十八条:检查参数的有效性
    第二十九条:优先考虑类型安全的异构容器
    第二十八条:利用有限制通配符来提升API的灵活性
    C# 利用第三方SharpZipLib进行ZIP压缩
    无法解决 equal to 操作中 "Chinese_PRC_CI_AS_WS" 和 "Chinese_PRC_CI_AS" 之间的排序规则冲突
    使用EasyUI的treegrid犯的个低级错误
    Js千位分隔符
    Google Chrom浏览器默认只能显示字体大小大于等于12px
    Asp.Net2.0开发小问题汇总
    Oracle dbms_output.put_line长度限制问题
  • 原文地址:https://www.cnblogs.com/liuyinlei/p/4875720.html
Copyright © 2011-2022 走看看