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/
  • 相关阅读:
    Trapping Rain Water
    Construct Binary Tree from Preorder and Inorder Traversal
    Flatten Binary Tree to Linked List
    Permutations II
    Unique Paths II
    Path Sum II
    Unique Binary Search Trees II
    evdev module-----uinput.py
    evdev module-----events.py
    evdev module-----device.py
  • 原文地址:https://www.cnblogs.com/duwei/p/5145686.html
Copyright © 2011-2022 走看看