uniapp長按刪除解決了同一個元素長按和點擊的沖突

長按刪除並解決點擊的沖突

<view class="item-box" v-for="(item,index) in result" @click="more(item)" @touchstart.prevent="touchstart(item.topic, index)"
      @touchend.prevent="touchend"> 
</view>

點擊的沖突解決需要設立一個長按的標記longTouch識別到長按的時候標記不能點擊結束的時候再標記回來

// 點擊設備進入更多
more(item) {
	if (!this.longTouch) {
        uni.navigateTo({
            url: `../details/details?topic=${item.topic}&image=${item.image}`,
        })
    }
},
// 長按開始
touchstart(topic, index) {
    let that = this;
    clearInterval(this.Loop); //再次清空定時器，防止重復注冊定時器
    this.Loop = setTimeout(function() {
        uni.showModal({
            title: '刪除',
            content: '請問要刪除此設備嗎？',
            success: async (res) => {
                if (res.confirm) {
                    uni.request({
                        url: '/topic/cancletopic/' + topic,
                        method: 'POST',
                        success(response) {
                            if (response.data.success) {
                                // 從索引處刪除一個元素
                                that.result.splice(index,1);
                            }
                        }
                    })
                    console.log('用戶點擊確定');
                } else if (res.cancel) {
                    console.log('用戶點擊取消')
                }
            }
        });
        this.longTouch = true;
    }.bind(this), 1000);
},
// 長按結束
touchend() {
    // 延時解決抖動沒有這個長按的時候也會觸發點擊
    setTimeout(()=> {
        this.longTouch = false;
    }, 100)

    clearInterval(this.Loop);
},