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