zoukankan      html  css  js  c++  java
  • html页面添加长按事件

    记录是为了更好的成长!

    <view class="money">
       <text class="pic_bg" @click="checkValue(item.value)" v-for="item in price" :key="item.text" 
             @touchstart="gtouchstart()" @touchmove="gtouchmove()" @touchend="gtouchend(item.value)">{{ item.text }}</text>
    </view>
    <script>
        
    //import { Picker } from 'vux'
    
    export default {
        /*components: {
          Picker
        },*/
      data() {
        return {
            timeOutEvent: 0 //定时器
        }
      },
      mounted() {
        
      },
      methods: {
        //开始按   
                gtouchstart(){   
                    this.timeOutEvent = setTimeout(this.longPress(),500);//这里设置定时器,定义长按500毫秒触发长按事件,时间可以自己改
                    return false;   
                },  
                //手释放,如果在500毫秒内就释放,则取消长按事件,此时可以执行onclick应该执行的事件   
                gtouchend(text){   
                    clearTimeout(this.timeOutEvent);//清除定时器   
                    if(this.timeOutEvent!=0){   
                        //这里写要执行的内容(
                        this.value = text;
                        this.buttonDisabled = false;
                    }   
                    return false;   
                },  
                //如果手指有移动,则取消所有事件,此时说明用户只是要移动而不是长按   
                gtouchmove(){   
                    clearTimeout(this.timeOutEvent);//清除定时器   
                    this.timeOutEvent = 0;    
                },   
                //真正长按后应该执行的内容   
                longPress(){   
                    this.timeOutEvent = 0;   
                }
      },
      
    }
    </script>

    以上内容代表个人观点,仅供参考,不喜勿喷。。。

  • 相关阅读:
    547. Friend Circles
    399. Evaluate Division
    684. Redundant Connection
    327. Count of Range Sum
    LeetCode 130 被围绕的区域
    LeetCode 696 计数二进制子串
    LeetCode 116 填充每个节点的下一个右侧节点
    LeetCode 101 对称二叉树
    LeetCode 111 二叉树最小深度
    LeetCode 59 螺旋矩阵II
  • 原文地址:https://www.cnblogs.com/newbest/p/11215417.html
Copyright © 2011-2022 走看看