码迷,mamicode.com
首页 > Web开发 > 详细

html页面添加长按事件

时间:2019-07-19 20:33:06      阅读:171      评论:0      收藏:0      [点我收藏+]

标签:code   turn   释放   勿喷   div   添加   参考   click   移动   

记录是为了更好的成长!

<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>

 

 

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

html页面添加长按事件

标签:code   turn   释放   勿喷   div   添加   参考   click   移动   

原文地址:https://www.cnblogs.com/newbest/p/11215417.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!