博客图片取消放大以及复制功能

写在前面

使用手机或电脑浏览页面的时候，有些浏览器内核的原因，点击 img 标签图片会自动放大，长按会弹出下载或者保存选项。

在写页面时如何避免此类情况的发生呢？我们可以使用 CSS 来屏蔽图片的选中。

两个方案：

1. 首先想到的是通过 JS 实现，对 touch 事件做处理。

window.ontouchstart = function(e) { e.preventDefault(); };

2. 通过 CSS3 属性实现。

img {
	pointer-events: none;
}

如果只是禁止图片选中，长按图片不会有问题，但是如果是先选择旁边的文字，同时选中了图片，那图片照样会被复制出来。

再给元素的 CSS 中添加如下两行代码：

-webkit-user-select: none;/*禁用手机浏览器的用户选择功能 */
-moz-user-select: none;

这时候禁止选中文字就没有问题了，可以实现整篇文章不可复制或保存。

在博客后台自定义处插入如下完整代码

<style>
img {
	pointer-events: none;
}
</style>

<script>
  window.ontouchstart = function(e) { e.preventDefault(); };
  -webkit-user-select: none;/*禁用手机浏览器的用户选择功能 */
  -moz-user-select: none;
</script>

参考文章：

• 《CSS屏蔽手机端长按选中 防止图片自动放大 禁止复制》
• https://cloud.tencent.com/developer/article/1538503