最近做了一个图片阅后即焚的网页在移动端浏览，过程是按住屏幕并移动时，图片会慢慢展示，松开手时图片立即粉碎消失。
但是长按图片时会触发浏览器自带的长按事件，从网上搜索得知有以下两种方法：
1.添加事件 ontouchstart = "return false;"
2.css统一加上 -webkit-user-select:none; -webkit-touch-callout:none;
但是上述方法对页面的其他需求有影响，最终我采用的方法是，写一个空的透明的DIV置于页面最上层遮住所有元素，这样就可以避免系统的长按事件，在需要屏蔽长按事件时，隐藏DIV即可，DIV样式：{position:fixed;width:100%;height:100%;z-index:99;background:rgba(255,255,255,0);overflow:hidden;top:0px;left:0px;}
立即学习“前端免费学习笔记（深入）”；
PS:过程中还遇到一下小问题就是，在需要长按二维码识别的页面，已经移除了当前页面的遮罩DIV，但是长按还是没反应。
二维码开始样式是：{width:46%;position:fixed;left:27%;top:40%;}
后来发现必须给二维码加上层高 z-index:100;大于遮罩DIV的层高。
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
793
收藏
