如何禁用长按图片弹出菜单（微信公众号H5页面）

前言

最近碰到一个需求：微信公众号H5页面展示的图片，都不允许用户保存。但是在微信中打开的H5页面，长按图片默认会有弹框，弹框中就有“保存到手机”的菜单项。如下图所示：

因此需要禁止弹出该弹窗。在网上找了好多方案，大多都类似，试了这些方法，感觉好多坑，所以来总结下自己实现过程。

实现方法

1. pointer-events:none;

pointer-events是一个css3属性，用于指定元素是否能响应鼠标(或触摸)事件

常用的属性值为 auto 和 none（这两个属性值用于浏览器，其它的属性值都与SVG相关）

• auto

设置pointer-events属性auto的元素可以响应鼠标事件，与pointer-events属性未指定时的表现效果相同，pointer-events属性默认值为auto

• none

设置pointer-events属性none的元素（包括它的子孙元素）不会响应鼠标事件。

1. 当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。

2. pointer-events:none的作用不只是禁用链接hover，打开链接等效果，是真实意义上的将onlick事件去掉了

给img标签加上pointer-events:none，img 元素就不会响应任何鼠标事件，例如拖动、悬停、单击。从而实现长按图片没有微信默认弹窗出现

img {
  pointer-events: none;
}

注：此方法适用于当图片元素的父元素是div标签，给img标签设置该css属性，可以实现该需求；但是如果父元素（或者外层元素）为a标签，给img标签设置该css属性，没有效果（ps: 不明白为什么外层元素为a标签，就没法实现）

2. 图片元素的同级加一个透明盒子

.imgMask{ 
position: absolute; 
z-index: 100; 
left: 0; 
right: 0; 
top: 0; 
bottom: 0; 
opacity: 0; 
}

图片元素的外层元素为div标签，才能实现该需求。如果外层元素为a标签则不行

3. 设置背景图片

删除图片元素，给包裹图片的元素设置背景图。如果设置背景图的元素为a标签可以实现长按图片没有微信默认弹窗出现

本来打算就用这个方法实现所有页面的效果，但是后面有个列表里面包含了有a标签，也在a标签设置了背景图，在手机上测试，长按图片还是出现了弹窗。没办法，只能再找解决方案，就是下面第四个方法

4. pointer-events:none + js控制点击跳转

把列表里面的a标签（图片元素可以在a标签里面，也可以设置为a标签背景图）设置属性pointer-events：none，让其不响应鼠标事件，所以点击跳转页面就失效了，只能使用js控制a标签的外层元素li来实现点击跳转页面

a{
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

const myList = document.querySelector('.video-list') //获取ul元素
myList.addEventListener('click', (event) => {
    const li = event.target
    const url = li.getAttribute('data-url') // 使用`getAttribute()`方法,获取该元素的自定义属性值(跳转链接)
    window.location.href = url;
})

小结

一般情况，图片元素的外层元素没有a标签，就可以使用第一种方法和第二种方法；第三种方法用于原本图片元素的外层元素有a标签，但是不可控；第四种方法可以满足图片元素的外层元素有a标签的情况

本文正在参加「金石计划」