H5怎么禁用长按复制的功能？

最新推荐文章于 2023-12-02 21:31:25 发布

转载最新推荐文章于 2023-12-02 21:31:25 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/weixin_43392489/article/details/115203697

文章标签：

#html5 #javascript

【问问塔罗牌】是一个个人开发的塔罗牌占卜应用，现在关注的是如何在H5中禁用长按复制和图片保存功能。通过设置CSS样式，如`-webkit-touch-callout:none;`和`pointer-events:none;`，可以防止用户长按图片保存和选择文字，但微信浏览器可能需要额外处理。

个人开发的塔罗牌占卜小程序：【问问塔罗牌】快来瞧瞧吧！

[html] H5怎么禁用长按复制的功能？

// 禁止长按图片保存，设置img样式
-webkit-touch-callout: none;
pointer-events: none; // 微信浏览器无法禁止，需加上这句

// 禁止长按选择文字
-webkit-user-select: none;

// 禁止长按呼出菜单
-webkit-touch-callout: none;