一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

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

前言

最近碰到一个需求:微信公众号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标签的情况

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

原文链接:https://juejin.cn/post/7215781742480883768 作者:sherlockkid7

(0)
上一篇 2023年3月29日 下午4:06
下一篇 2023年3月29日 下午4:17

相关推荐

发表评论

登录后才能评论