首页手记关于移动端tap事件的实现

关于移动端tap事件的实现

标签：

Html/CSS Html5 JavaScript

在做移动端web开发时，常遇到click事件点击延迟问题，直接使用click事件就会造成不好的体验，但是我们可以用移动端的touch事件来模拟click事件，于是我花了些时间做了一个tap.js，下面附上代码。

js：

/*!
 * tap.js v1.2.2
*/
;(function (factory) {
    if (typeof define === 'function' && define.amd) {
        define(function(){return factory;});
    }else if (typeof exports == "object") {
        module.exports = factory;
    }else {
        window.tap = factory;
    }
}(function(){
    var arg = arguments,
        doc = window.document,
        els = arg[0] == doc ? [doc]:doc.querySelectorAll(arg[0]),
        isTouch = "ontouchend" in doc,
        len = els.length,
        i = 0,
        isEntrust = typeof arg[1]== 'string',
        isMulti = typeof arg[1]== 'object';

    if(len == 0){return false;}
    while (i < len){
        if(isTouch){
            var o = {};
            els[i].addEventListener('touchstart',function(e){
                var t = e.touches[0];
                o.startX = t.pageX;
                o.startY = t.pageY;
                o.sTime = + new Date;
            });
            els[i].addEventListener('touchend',function(e){
                var t = e.changedTouches[0];
                o.endX = t.pageX;
                o.endY = t.pageY;
                if((+ new Date)-o.sTime<300){
                    if(Math.abs(o.endX-o.startX)+Math.abs(o.endY-o.startY)<20){
                        handler(e,arg,this);
                    }
                }
                o = {};
            });
        }else{
            els[i].addEventListener('click',function(e){
                handler(e,arg,this);
            });
        }
        i ++;
    }
    function handler(e,arg,that){
        if(e.target.href){
            return window.location = e.target.href;
        }
        if(isEntrust){
            if(equal(e,arg[1])){
                prevent(e);
                arg[2].call(e.target,e);
            }
        }else if(isMulti){
            for(key in arg[1]){
                if(equal(e,key)){
                    prevent(e);
                    arg[1][key].call(e.target,e);
                    break;
                }
            }
        }else{
            prevent(e);
            arg[1].call(that,e);
        }
    }
    function equal(e,el){
        var flag = false;
        if(el.indexOf('.') != -1 && e.target.className == el.replace('.','')){
            flag = true;
        }else if(el.indexOf('#') != -1 && e.target.id == el.replace('#','')){
            flag = true;
        }else if(e.target.nodeName.toLocaleLowerCase() == el){
            flag = true;
        }
        return flag;
    }
    /*preventDefault不执行则会引起触发失效bug，
     *但不必要则不执行。 
    */
    function prevent(e){
        var tagName = e.target.tagName.toLocaleLowerCase();
        if(tagName != 'select' && tagName != 'input' && tagName != 'textarea'){
            doc.activeElement.blur();
            e.preventDefault();
        }
    }
}))

demo.html（这里可以直接运行测试）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0, user-scalable=0">
    <title>tap demo</title>
    <style type="text/css">
        h4{margin: 10px 0;}
    </style>
</head>
<body>
        <h3>直接调用</h3>
    <div>
        <button class="button">tap1</button>
        <button class="button">tap2</button>
        <button class="button">tap3</button>
        <button class="button">tap4</button>
        <button class="button">tap5</button>
    </div>
    <hr>
    <h3>事件委托</h3>
    <div id="test">
        <button class="button2">tap1</button>
        <button class="add">add</button>
        <button class="doc">document</button>
    </div>
    <hr>
    <h3>事件冒泡</h3>
    <h4>正常冒泡</h4>
    <div id="parent">
        parent<br><br>
        <button class="son">son</button>
    </div>
    <h4>阻止冒泡</h4>
    <div id="parent2">
        parent2<br><br>
        <button class="son2">son2</button>
    </div>
    <h3>阻止默认动作</h3>
    <form action="">
        <button class="submit" type="submit">提交</button>
    </form>
    <h3>代码优化</h3>
    <h4>快速跳转</h4>
    <div class="a-box">
        <a href="https://github.com/weijhfly/tap"><button>里面有子元素</button></a>
        <a href="https://github.com/weijhfly/tap">没有子元素</a>
    </div>
    <br>
    <input type="text" placeholder="测试焦点是否正常">
    <h4>同时指定多个事件</h4>
    <button class="e1">事件1</button>
    <button class="e2">事件2</button>
    <button class="e3">事件3</button>
        <!-- layer.js仅做弹出演示 -->
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://weijhfly.github.io/js/layer/layer.js"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://weijhfly.github.io/js/tap.js"></script>
<script>
//直接调用
tap('.button',function(e){
    console.log(e);
    var event = "ontouchend" in document? 'tap':'click';
    layer.msg(event+' : '+this.innerText);
})
// 事件委托 event delegation
tap('#test','.button2',function(){
    var event = "ontouchend" in document? 'tap':'click';
    layer.msg(event+' : '+this.innerText);
})
var i = 0;
tap('#test','.add',function(e){
    console.log(e);
    i ++;
    var test = document.getElementById("test");
    var button = document.createElement("button");
    button.className = 'button2';
    button.innerHTML = "button "+i;
    test.insertBefore(button,test.childNodes[0]); 
})
tap(document,'.doc',function(){
    layer.msg('doc');
})
/*
阻止冒泡 stop propagation
在事件委托中仅能阻止委托元素对上层的冒泡
*/
tap('#parent',function(){
    setTimeout(function() {
        layer.msg('parent');
    }, 100);
})
tap('.son',function(){
    layer.msg('son');
})
// 阻止冒泡
tap('#parent2',function(){
    setTimeout(function() {
        layer.msg('parent2');
    }, 100);
})
tap('.son2',function(e){
    e.stopPropagation();
    layer.msg('son2');
})
/*
阻止默认动作
同上，事件委托中仅能阻止委托元素的默认动作
注意：在移动端默认执行e.preventDefault();
*/
tap('.submit',function(e){
    e.preventDefault();
    e.stopPropagation();
    layer.msg('无法提交');
})
/*
* 代码优化
*/
//跳转 **存在href属性
tap(document,'a');
// 通过委托实现多个事件 **默认不能重复，重复只执行第一个
tap(document,{
    '.e1':function(){
       layer.msg(this.innerText);
    },
    '.e2':function(){
       layer.msg(this.innerText);
    },
    '.e3':function(){
       layer.msg(this.innerText);
    }
});
</script>
</body>
</html>

github：https://github.com/weijhfly/tap
有兴趣的可以看下，另外还有vue v-tap指令版的 https://github.com/weijhfly/vue-tap，欢迎关注。

此外，在移动端解决点击延迟问题，还是比较推荐fastclick，兼容性较好且方便使用，不过相对而言模拟tap事件体积较小，也可以拿来练手了。

点击查看更多内容