如何使用Javascript在移动端浏览器禁用所有图片的长按功能

方案1：CSS方案（最简易，优先选用） #

直接在全局CSS中添加以下代码，不会影响图片点击跳转能力，适配绝大多数主流浏览器：

img {
  /* 禁用图片选中 */
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  /* 针对iOS Safari禁用长按默认弹出菜单 */
  -webkit-touch-callout: none;
}

方案2：JS方案（兼容性更强，特殊场景用） #

如果CSS方案在部分设备不生效，可以将以下代码添加到页面的<script>标签中，全局自动生效，无需修改其他业务代码：

// 阻止图片的右键/长按菜单触发
document.addEventListener('contextmenu', e => {
  if (e.target.tagName === 'IMG') e.preventDefault()
})

// 兼容移动端长按默认行为，不需要可删除
document.addEventListener('touchstart', e => {
  if (e.target.tagName !== 'IMG') return
  const longPressTimer = setTimeout(() => e.preventDefault(), 500)
  // 触摸结束/滑动时取消长按判定
  e.target.addEventListener('touchend', () => clearTimeout(longPressTimer), { once: true })
  e.target.addEventListener('touchmove', () => clearTimeout(longPressTimer), { once: true })
}, { passive: false })

注意事项 #

• 两种方案都不会影响图片外层<a>标签的点击跳转功能
• 新手直接复制对应代码到对应文件即可使用

内容的提问来源于stack exchange，提问作者SimpleGuy_