zepto中的longTap事件和原生的touchend事件冲突如何避免?

clipboard.png
键盘事件,想要控制两种效果。一种是长按事件即longTap事件,长按数字键盘750ms再显示数字,另一种效果是直接点击即touchend事件无延迟显示结果。

阻止事件冒泡行不通,于是想通过触发一个事件时取消另一个事件监听,然后通过异步来重新监听事件处理函数,这样每次点击之间就互不影响。但是这样行不通。重新监听事件处理函数并没有起到效果。

        function onTouchend(){
            $('#keyBox').on('longTap' , 'a' , function(e) {
                e.preventDefault();
                e.stopPropagation();
                keyboardEvent(e);
                $('#keyBox').off('touchend' , 'a');
                setTimeout(function(){
                    onLongTap();
                });
            }); 
        }

        function onLongTap(){                
            $('#keyBox').on('touchend' , 'a' , function(e) { 
                e.preventDefault();             
                e.stopPropagation();
                keyboardEvent(e);
                $('#keyBox').off('longTap' , 'a');
                setTimeout(function(){
                    onTouchend();
                });
            });
        }
        onTouchend();
        onLongTap();

而且有个很奇怪的点是:

        $('#keyBox').on('touchend' , 'a' , function(e) { 
            e.preventDefault();
            e.stopPropagation();        
            keyboardEvent(e);
        });

        $('#keyBox').on('longTap' , 'a' , function(e) {
            keyboardEvent(e);  
            return false;
        }); 

直接这样写会同时执行两个事件,直接点击松开会先触发touchend,然后大概有750ms延迟就触发第二个事件。这都不是长按啊,为什么会执行longTap?长按的话就先触发longTap然后再触发touchend。

谁有比较好的解决方案?

阅读 5.5k
2 个回答

用fastclick试试?

要用就用封装好的啊,一般这种手势库都是设置几个计时器,如果没到点touchend触发了,那么就生成个tap事件,如果touchend是到点以后再触发的那就触发longtap,你一边用着longtap一边还处理着touchend,肯定会乱的啊。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题