前言
最近碰到一个需求:微信公众号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
的元素(包括它的子孙元素)不会响应鼠标事件。
当其后代元素的
pointer-events
属性指定其他值时,鼠标事件可以指向后代元素,在这种情况下,鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。
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标签的情况
本文正在参加「金石计划」
原文链接:https://juejin.cn/post/7215781742480883768 作者:sherlockkid7