博客

在手机浏览器中长按图片会有默认弹窗

经过不断测试，知道可通过禁用掉touchstart就可以限制长按图片的默认弹窗

但原有的点击，长按事件没了

vue环境中

/* 
 * 可以通过传递 passive 为 true 来明确告诉浏览器
 * 事件处理程序不会调用 preventDefault 来阻止默认滑动行为。
 * 如果设置了passive为true，同时又阻止默认行为，阻止是不生效的
 */
// ，
document.body.addEventListener('touchstart', function(e){
	console.log('touchstart',e);
	if(e.target.tagName.toLowerCase()==='img'){
		e.preventDefault();
	}
}, { passive:false });//passive 参数不能省略，用来兼容ios和android

uniapp环境中


限制长按并实现点击，长按事件，

但明显对于双指类似这样的操作不好做兼容处理

<image 
	@touchstart.prevent='handleTouchStart($event)' 
	@touchmove='handleTouchMove'
	@touchend="handleTouchEnd($event)"
	@touchcancel='handleTouchCancel($event)' src="@/static/logo.png" mode=""  
></image>

//开始按
handleTouchStart(e){
	this.touchT = new Date().getTime();
	this.touchTimer && clearTimeout(this.touchTimer)
	this.touchTimer = setTimeout(() => {
		this.touchLongTap && this.touchLongTap()
	}, 500)
},
//如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按 
handleTouchMove(e){
	this.touchTimer && clearTimeout(this.touchTimer)		
},
handleTouchEnd(e){
	this.touchE = new Date().getTime();
	this.touchTimer && clearTimeout(this.touchTimer)
	if (this.touchE - this.touchT < 300) {
		this.touchClick && this.touchClick()
	}
},
handleTouchCancel(e) {
	this.handleTouchEnd(e)
},
// 长按后应该执行的内容  
touchLongTap(){
	console.log('touchLongTap长按事件');
},
// 点击后应该执行的内容  
touchClick(){
	console.log('touchClick点击事件');
},

这里其它人的做法


内嵌h5，禁止长按图片保存



移动端web如何禁止长按弹出的菜单？



h5移动端阻止浏览器长按事件