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>

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

  • 相关阅读:
    HDU 2089 不要62
    NOIP 2012 疫情控制
    提高工作效率的shell工具
    log loss与ctr预估
    推荐系统
    浮点数的间隙
    graphviz初学入门指南
    sparse_hash_map、dense_hash_map和sparsetable的实现细节
    每天离不开的工具vim
    安利开发利器 -- tmux
  • 原文地址:https://www.cnblogs.com/newbest/p/11215417.html
Copyright © 2011-2022 走看看