美文网首页
微信开发点击事件中遇到的问题

微信开发点击事件中遇到的问题

作者: _花 | 来源:发表于2017-11-15 13:37 被阅读0次

1.在单击的时候采用延迟,双击的时候取消单机操作!

<script>
    var timer = null;
    $('a').on('click', function () {  
      clearTimeout(timer);
      timer = setTimeout(function () { 
       console.log(22222)
      }, 300);   // 延迟300ms执行单击事件
    });
    
    //  双击输入框时可以输入学生姓名  双击事件
    $('a').on('dblclick',  function (ev) {
      ev.stopPropagation();
      clearTimeout(timer);
      console.log(3333)
    });
</script>

2.IOS双击事件的发生

var lastClickTime = 0;
        var clickTimer;
        document.getElementById('xxx').addEventListener('click', (event) => {
            var nowTime = new Date().getTime();
            if (nowTime - lastClickTime < 400) {
                /*双击*/
                lastClickTime = 0;
                clickTimer && clearTimeout(clickTimer);
                alert('双击');
                
            } else {
                /*单击*/
                lastClickTime = nowTime;
                clickTimer = setTimeout(() => {
                    alert('单击');
                }, 400);
            }
        });

3.微信开发:解决IOS端下面的点击延迟问题:
2007年,苹果为了解决在Iphone这种小屏幕浏览器站点的问题,就设置了300毫秒的延迟。这是为了系统判断用户是双击还是单击屏幕。这里推荐使用fastclick.js :https://github.com/ftlabs/fastclick

//在头部引入JS
<script type="text/javascript" src="/js/mobile/fastclick.js"></script>
//页面加载时,使用
$(function() {
  FastClick.attach(document.body);
});

4.多点触控插件Hammer.js,用来解决移动端双手指外滑放大,内滑缩小等功能。https://github.com/hammerjs/hammer.js

  1. 如何阻止ios微信下双击屏幕向上滑的问题:摘录自https://segmentfault.com/q/1010000007337811
//解决ios双击页面上移问题
//在项目中测试不紧input/button这些表单控件有这个问题,p,div等也有问题,于是乎就直接在body开刀了
(function()
{
    var agent = navigator.userAgent.toLowerCase();        //检测是否是ios
    var iLastTouch = null;                                //缓存上一次tap的时间
    if (agent.indexOf('iphone') >= 0 || agent.indexOf('ipad') >= 0)
    {
        document.body.addEventListener('touchend', function(event)
        {
            var iNow = new Date()
                .getTime();
            iLastTouch = iLastTouch || iNow + 1 /** 第一次时将iLastTouch设为当前时间+1 */ ;
            var delta = iNow - iLastTouch;
            if (delta < 500 && delta > 0)
            {
                event.preventDefault();
                return false;
            }
            iLastTouch = iNow;
        }, false);
    }

})();

//下面是国外coder给的解决方案
//http://appcropolis.com/blog/howto/implementing-doubletap-on-iphones-and-ipads
(function($){
    // Determine if we on iPhone or iPad
    var isiOS = false;
    var agent = navigator.userAgent.toLowerCase();
    if(agent.indexOf('iphone') >= 0 || agent.indexOf('ipad') >= 0){
           isiOS = true;
    }
 
    $.fn.doubletap = function(onDoubleTapCallback, onTapCallback, delay){
        var eventName, action;
        delay = delay == null? 500 : delay;
        eventName = isiOS == true? 'touchend' : 'click';
 
        $(this).bind(eventName, function(event){
            var now = new Date().getTime();
            var lastTouch = $(this).data('lastTouch') || now + 1 /** the first time this will make delta a negative number */;
            var delta = now - lastTouch;
            clearTimeout(action);
            if(delta<500 && delta>0){
                if(onDoubleTapCallback != null && typeof onDoubleTapCallback == 'function'){
                    onDoubleTapCallback(event);
                }
            }else{
                $(this).data('lastTouch', now);
                action = setTimeout(function(evt){
                    if(onTapCallback != null && typeof onTapCallback == 'function'){
                        onTapCallback(evt);
                    }
                    clearTimeout(action);   // clear the timeout
                }, delay, [event]);
            }
            $(this).data('lastTouch', now);
        });
    };
})(Zepto);

//usage:
$(selector).doubletap(
    /** doubletap-dblclick callback */
    function(event){
        alert('double-tap');
    },
    /** touch-click callback (touch) */
    function(event){
        alert('single-tap');
    },
    /** doubletap-dblclick delay (default is 500 ms) */
);
//下面是国外coder给的解决方案--end
//解决ios双击网面上移问题--end

相关文章

网友评论

      本文标题:微信开发点击事件中遇到的问题

      本文链接:https://www.haomeiwen.com/subject/phicvxtx.html