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

darkerXi 发布于2019-08-22 10:44 / 424人阅读

摘要：原理首先要理解的自定义事件。这样子就好了直接预览下效果，能正常调用，还行还行酱紫之后会不会好一点，写的不好道友们轻喷

背景

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

{{msg}}－－－长按（longtap）点击（tap）事件

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

原理

首先要理解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的小代码




    
        
        
        
        
        
        
    

    
        
            {{msg}}－－－长按（longtap）点击（tap）事件
            
            {{msg}}－－－点击（tap）事件
            
            {{msg}}－－－长按（longtap）事件
            
            {{msg}}－－－touchstart事件
            
            {{msg}}－－－没有事件跟风用～～～

上面引入了一个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()，还行还行～～～！！！

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

GPU服务器私有云 php的自定义函数 js实现f11的效果自定义view的实现函数的自调用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91173.html

深入理解js

摘要：详解十大常用设计模式力荐深度好文深入理解大设计模式收集各种疑难杂症的问题集锦关于，工作和学习过程中遇到过许多问题，也解答过许多别人的问题。介绍了的内存管理。延迟加载 (Lazyload) 三种实现方式延迟加载也称为惰性加载，即在长网页中延迟加载图像。用户滚动到它们之前，视口外的图像不会加载。本文详细介绍了三种延迟加载的实现方式。详解 Javascript十大常用设计模式力荐~ ...

caikeal 2019-08-26 11:39 评论0 收藏0
前端窝 - 收藏集 - 掘金

摘要：毫无疑问，设计模式于己于他人于系统都是多赢的设计模式使代码编写真正工程化设计模小书前端掘金这是一本关于的小书。 JavaScript 常见设计模式解析 - 掘金设计模式（Design pattern）是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性。毫无疑问，设计模式于己于他人于系统都是多赢的；设计...

李文鹏 2019-08-21 11:41 评论0 收藏0
深刻理解Vue中的组件

摘要：还可以在某个实例中注册只有自己能使用的组件。当在一个组件中，使用了其他自定义组件时，就会利用子组件的属性和事件来和父组件进行数据交流。正确的做法是，在父组件中绑定属性值时，加上修饰符。 2019-06-20更新: Vue2.6已经更新了关于内容插槽和作用域插槽的API和用法，为了不误导大家，我把插槽的内容删除了。详情请看官网 2018-07-19更新: 更新作用域插槽的属性: sco...

mdluo 2019-08-20 18:34 评论0 收藏0
vue2.0开发聊天程序（三）组件的通信

摘要：我在中写了这段代码在组件被创建时候将会执行此函数相当于进入页面的自执行使用方法监听属性并执行一个回调函数按道理在元素被创建的时候，会将监听到的值赋给并且打印。天地不仁以万物为刍狗，宇宙无义视众生如蝼蚁　　　　　　　　　　　　　　　　　　——萧鼎和我上一节列出了５个关键点，第一个路由已经解决了，接下来解决第二个问题：组件的通信问题一、组件的关系组件之间的关系无非就是两种父子关系...

ddongjian0000 2019-08-21 11:27 评论0 收藏0