js长按事件

最新推荐文章于 2023-03-24 16:38:42 发布

MiemieWan

最新推荐文章于 2023-03-24 16:38:42 发布

阅读量4.9k

点赞数

分类专栏： js示例 vue

本文链接：https://blog.csdn.net/MiemieWan/article/details/81141288

版权

vue 同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

js示例

7 篇文章 0 订阅

订阅专栏

方法一、touch事件

var self = this;
var longClick = false;
$(".product").on({
    touchstart: function(e){
        longClick = false;//设置初始为false
        timeOutEvent = setTimeout(function(){
            //此处为长按事件-----在此显示遮罩层及删除按钮
            longClick=true;//假如长按，则设置为1
        },500);
    },
    touchmove: function(){
        clearTimeout(timeOutEvent);
        timeOutEvent = 0;
        e.preventDefault();
    },
    touchend: function(e){
        clearTimeout(timeOutEvent);
        if(timeOutEvent!=0 && longClick==false){
            //此处为点击事件----在此处添加跳转详情页
        }
        return false;
    }
});

方法二、vue项目中vue-touch 的press和pressup替代touchstart和touchend

 <v-touch v-on:press="onPress(record.uid,index)" v-on:pressup="onPressUp">
   <router-link :to="{name:'chats',params:{talkUserId: record.uid,talkName:record.nickname}}" class="chats-link">
     <router-link :to="{name:'userInfo',params:{userId:record.uid,userName:record.nickname}}">
         <img :src="record.avatar">
     </router-link>
     <div class="private-msg-center">
         <h4>{{record.nickname}}</h4>
         <p>{{record.ct}}</p>
     </div>
     <div class="private-msg-right">
         <span class="private-msg-time">{{record.createtime}}</span>
         <span class="private-msg-num" v-if="record.unread != '0'">{{record.unread}}</span>
     </div>
   </router-link>
</v-touch>      


 //删除聊天
            onPress:function(uid,index) {
            var _this = this;
            _this.longClick = false;
            _this.timeOutEvent = setTimeout(function() {
                _this.longClick = true;
                console.log("长按");
                _this.$fui.confirm('删除该聊天', () => {
                    $.ajax({
                        type: "POST",
                        url: "/whisper/Index/deleteChatRecord",
                        data: {'sid':uid},
                        success: function(data){ 
                            var recodeData = _this.recordList;
                            console.log(data);
                            _this.$fui.toast(data.msg);
                            if(data.code == 1) {
                                recodeData.splice(index,1);
                                _this.recordList = recodeData;
                            }
                        },
                        error:function(data) {
                            console.log(data);
                            _this.$fui.toast('删除失败,请重新操作');
                        }
                    })
                });
            },500);
        },
        onPressUp:function() {
            var _this = this;
            if(_this.timeOutEvent) {
                clearTimeout(_this.timeOutEvent);
                _this.timeOutEvent = null;
            }
            return false;
        },