uniapp h5图片长按隐藏默认菜单弹出

uniapp 图片长按会之后会出现默认菜单,移动端会出现复制、分享等。我是直接封装成一个图片组件,长按和点击会触发不同的事件类型,图片组件如下:

javascript 复制代码
<template>
	<view>
		<image v-bind="$attrs" @touchstart="imgTouchStart" @touchend="imgTouchEnd"></image>
	</view>
</template>

<script setup>
	const props = defineProps({
		time:{//触发长按逻辑的时常,单位ms
			type:Number,
			default:800
		},
		stop:{//是否需要组织冒泡
			type:Boolean,
			default:true
		}
	})
	const emits = defineEmits(['customerClick'])
	let pressTimer = null;
	let longPressTriggered = false;
	const imgTouchStart = e => {
		e && e.preventDefault()
		if(props.stop){
			e && e.stopPropagation()
		}
		longPressTriggered = false;
		pressTimer = setTimeout(() => {
			longPressTriggered = true;
			emits('customerClick',{type:'longpress'})
		}, props.time);
	}
	
	const imgTouchEnd = (e) => {
		if(props.stop){
			e && e.stopPropagation()
		}
		pressTimer && clearTimeout(pressTimer);
		if (!longPressTriggered) {
			emits('customerClick',{type:'click'})
		}
	}
	
</script>

<style>
</style>

使用如下:

javascript 复制代码
<template>
    //组件名称自定义
    <sbtImage class="image no-select" :src="src" @customerClick="data=>imageClick(data,item)"></sbtImage>
</template>

<script setup>

const imageClick = (e,data) => {
	if(e.type == 'longpress'){
		//长按事件的处理逻辑
	}else if(e.type == 'click'){
		//点击事件的处理逻辑
	}
}
</script>
相关推荐
一个游离的指针19 小时前
ES6新特性:let、const、块级作用域
开发语言·javascript·es6
前端小万19 小时前
想做个人副业别乱买服务器!我的 5 个月真实开销分享
前端·后端·github
用户693717500138420 小时前
我买的电视,我还不能研究它吗?
前端·后端·ai编程
Hilaku20 小时前
删了一个没用的 console.log,生产环境直接崩了!
前端·javascript·程序员
真上帝的左手20 小时前
2. 编程语言-JavaScript
开发语言·javascript
计算机魔术师20 小时前
Latent Space 解读 Anthropic 提交 S-1:拟以代码 AN 上市纳斯达克,H1 2026 营收 16.3B 美元
前端
2601_9498477520 小时前
Form-data 跨端三方库仓颉适配全流程
前端·javascript·flutter
zyseo820 小时前
谷歌SEO 内容更新焕新流程:让老页面重新起量
java·前端·javascript
Oiiouui21 小时前
关于 Logto 登录系统的体验以及建议
javascript·安全·react
夜雪一千21 小时前
标题特殊符号数据清洗实战:解决HTML实体、零宽字符、Emoji乱码踩坑
前端·html