vue长按事件模拟一

最新推荐文章于 2023-05-26 12:10:57 发布

章鱼no丸子

最新推荐文章于 2023-05-26 12:10:57 发布

阅读量4.9k

点赞数

分类专栏： vue 文章标签： vue 长按事件自定义指令

本文链接：https://blog.csdn.net/yuki_haha/article/details/73480526

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

雏形，未做优化，原理：自定义指令。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>yuki-长按事件</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="vue-resource.js"></script>
    <script type="text/javascript">
        Vue.directive("longtouch", function(el, binding) {
            var oDiv = el,
                value = binding.value,
                x = 0, y = 0, z = 0, timer = null;
            oDiv.addEventListener("touchstart",function(e) {
                if(e.touches.length > 1) {
                    return false;
                }
                z = 0;
                timer =  setTimeout(function() {
                    z = 1;
                }, 500);
                x = e.touches[0].clientX;
                y = e.touches[0].clientY;
                e.preventDefault();
            }, false);
            document.addEventListener("touchmove", function(e) {
               if(x != e.touches[0].clientX || y!= e.touches[0].clientY) {
                clearTimeout(timer);
                return false;
               }
            }, false);
            document.addEventListener("touchend", function(ev) {
                if(z != 1) {
                    clearTimeout(timer);
                    x = 0;
                    y = 0;
                    return false;
               } else {
                    x = 0;
                    y = 0;
                    z= 0;
                    alert("长按了啊")
               }
            }, false);
        })
        window.onload = function() {
            new Vue({
                el: '#test',
                data: {
                    timeOutEvent: 0
                },
                mounted() {

                }
            })
        }
    </script>
    <style type="text/css">
        #name{width:500px; height:500px; background: red;}
    </style>
</head>
<body>
    <div id="test">
         <div id="name" v-longtouch="timeOutEvent"></div>   
    </div>
</body>
</html>

章鱼no丸子

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue长按事件模拟一

雏形，未做优化，原理：自定义指令。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>yuki-长按事件</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="vue-resou
复制链接

扫一扫