zoukankan      html  css  js  c++  java
  • UIWebvView 解决onClick 延迟相应问题

    在使用 UIWebView 的过程中, 发现 onClick 触发需要等待300-500ms, Google了一下, 发现是因为ScrollView 在等待doubleTap, 所以有延迟

    使用如下代码是无效的.

    [webView.scrollView setDelaysContentTouches:NO]

    目前的解决方案是使用onTouchStart代替onClick, 找到了如下一段js代码

    function NoClickDelay(el) {
        this.element = typeof el == 'object' ? el : document.getElementById(el);
        if( window.Touch ) this.element.addEventListener('touchstart', this, false);
    }
    
    NoClickDelay.prototype = {
        handleEvent: function(e) {
            switch(e.type) {
                case 'touchstart': this.onTouchStart(e); break;
                case 'touchmove': this.onTouchMove(e); break;
                case 'touchend': this.onTouchEnd(e); break;
            }
        },
    
        onTouchStart: function(e) {
            e.preventDefault();
            this.moved = false;
    
            this.theTarget = document.elementFromPoint(e.targetTouches[0].clientX, e.targetTouches[0].clientY);
            if(this.theTarget.nodeType == 3) this.theTarget = theTarget.parentNode;
            this.theTarget.className+= ' pressed';
    
            this.element.addEventListener('touchmove', this, false);
            this.element.addEventListener('touchend', this, false);
        },
    
        onTouchMove: function(e) {
            this.moved = true;
            this.theTarget.className = this.theTarget.className.replace(/ ?pressed/gi, '');
        },
    
        onTouchEnd: function(e) {
            this.element.removeEventListener('touchmove', this, false);
            this.element.removeEventListener('touchend', this, false);
    
            if( !this.moved && this.theTarget ) {
                this.theTarget.className = this.theTarget.className.replace(/ ?pressed/gi, '');
                var theEvent = document.createEvent('MouseEvents');
                theEvent.initEvent('click', true, true);
                this.theTarget.dispatchEvent(theEvent);
            }
    
            this.theTarget = undefined;
        }
    };

    使用方法

    new NoClickDelay(document.getElementById('element'));

    jQuery 版本:

    (function( $ ) {
        $.fn.noClickDelay = function() {
            var $wrapper = this;
            var $target = this;
            var moved = false;
            $wrapper.bind('touchstart mousedown',function(e) {
                e.preventDefault();
                moved = false;
                $target = $(e.target);
                if($target.nodeType == 3) {
                    $target = $($target.parent());
                }
                $target.addClass('pressed');
                $wrapper.bind('touchmove mousemove',function(e) {
                    moved = true;
                    $target.removeClass('pressed');
                });
                $wrapper.bind('touchend mouseup',function(e) {
                    $wrapper.unbind('mousemove touchmove');
                    wrapper.unbind('mouseup touchend');
                    if(!moved && $target.length) {
                        $target.removeClass('pressed');
                        $target.trigger('click');
                        $target.focus();
                    }
                });
            });
        };
    })( jQuery );    
    $('#wrapperElement').noClickDelay();

    ----------------------------update. 找到一更完美的开源库

    fastclick

    转载请注明出处:http://duwei.cnblogs.com/
  • 相关阅读:
    STL读书笔记
    时间复杂度
    GDB十分钟教程
    lua函数随记
    svn提交时强制添加注释
    按位与、或、异或等运算方法
    mongodb常用语句
    STL容器的基本特性和特征
    C++:模板
    Vector 特性
  • 原文地址:https://www.cnblogs.com/duwei/p/5145686.html
Copyright © 2011-2022 走看看