admin管理员组文章数量:1545229
在手机浏览器中长按图片会有默认弹窗
经过不断测试,知道可通过禁用掉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移动端阻止浏览器长按事件
版权声明:本文标题:浏览器h5禁止长按图片保存 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1727159392a1099764.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论