无聊想实现一下vue的自定义事件，粗糙的效果，用来抛砖引玉

背景

是这样子滴，有时候我们用vue框架的时候，要用到很多手势，像tap、doubletap、longtap......，当然现在网上有很多手势裤什么的，拿来改一下也是可以实现自己想要的效果滴，我是希望用vue 的时候类似于

<p @tap="aaa" @longtap="bbb">{{msg}}－－－长按（longtap）点击（tap）事件</p>

这么用那好了，左思右想写了一个小栗子，用来抛砖引玉。

原理

首先要理解js的自定义事件。Events 可以使用 Event构造函数创建如下:

// 事件对象
var event = new Event('build');

// 监听事件
elem.addEventListener('build', function (e) { ... }, false);

// 分发事件
elem.dispatchEvent(event);

当然可以，添加自定义数据

var event = new CustomEvent('build', { 'detail': elem.dataset.time });

好了，看了上面的原理之后直接上源码，简单封装一个tap和longtap事件，

实现

先写个打架都熟悉的vue的小代码

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
        <style type="text/css">
            p{
                background: #168dd2;
                padding: 15px;
                color: #FFFFFF;
            }
        </style>
        <script type="text/javascript" src="vue.js"></script>
        <script type="text/javascript" src="tap.js"></script>
    </head>

    <body>
        <div id="app">
            <p @tap="aaa" @longtap="bbb">{{msg}}－－－长按（longtap）点击（tap）事件</p>
            
            <p @tap="aaa">{{msg}}－－－点击（tap）事件</p>
            
            <p @longtap="bbb">{{msg}}－－－长按（longtap）事件</p>
            
            <p @touchstart="aaa">{{msg}}－－－touchstart事件</p>
            
            <p>{{msg}}－－－没有事件跟风用～～～</p>
        </div>
    </body>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                msg: 'hello'
            },
            methods: {
                aaa: function(e) {
                    console.log(e);
                },
                bbb: function(e) {
                    console.log('loooongtap');
                    console.log(e);
                }
            }
        })
    </script>

</html>

上面引入了一个tap.js，下面我们就去补全这个js就好了。

tap.js

(function() {
    var TOUCHSTART, TOUCHMOVE, TOUCHEND;
    if(typeof(window.ontouchstart) != 'undefined') {
        TOUCHSTART = 'touchstart';
        TOUCHEND = 'touchend';
        TOUCHMOVE = 'touchmove';

    } else if(typeof(window.onmspointerdown) != 'undefined') {
        TOUCHSTART = 'MSPointerDown';
        TOUCHEND = 'MSPointerUp';
        TOUCHMOVE = 'MSPointerMove';
    } else {
        TOUCHSTART = 'mousedown';
        TOUCHEND = 'mouseup';
        TOUCHMOVE = 'mousemove';
    }

    function tap(node) {
        var x, y, startTime = 0,
            endTime = 0,
            in_dis = false;
        node.oncontextmenu = function() {
            return false;
        }
        node.addEventListener(TOUCHSTART, function(e) {
            x = e.touches[0].pageX;
            y = e.touches[0].pageY;
            startTime = (new Date()).getTime();
        });

        node.addEventListener(TOUCHEND, function(e) {
            e.stopPropagation();
            e.preventDefault();
            var curx = e.changedTouches[0].pageX;
            var cury = e.changedTouches[0].pageY;
            if(Math.abs(curx - x) < 6 && Math.abs(cury - y) < 6) {
                in_dis = true;
            } else {
                in_dis = false;
            }
            endTime = (new Date()).getTime();
            if(endTime - startTime > 300 && in_dis) {
                e.target.dispatchEvent(new CustomEvent('longtap', {
                    'detail': e
                }));
            } else {
                e.target.dispatchEvent(new CustomEvent('tap', {
                    'detail': e
                }));
            }
        });
    }

    tap(document);
})();

也先不管了直接挂载到document上面（人懒～～～～）。
这样子就好了直接预览下效果，

图片描述

能正常调用aaa(), bbb()，还行还行～～～！！！

酱紫之后会不会好一点？？？？，写的不好～～～道友们轻喷～～～～

无聊想实现一下vue的自定义事件，粗糙的效果，用来抛砖引玉

背景

原理

实现

naice

引用和评论

vue3初始化挂载组件流程

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号