星空网 > 软件开发 > 网页设计

屏蔽移动端浏览器的长按事件

  最近做了一个图片阅后即焚的网页在移动端浏览,过程是按住屏幕并移动时,图片会慢慢展示,松开手时图片立即粉碎消失。

  但是长按图片时会触发浏览器自带的长按事件,从网上搜索得知有以下两种方法:

  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的层高。

 




原标题:屏蔽移动端浏览器的长按事件

关键词:浏览器

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

风华正茂国际物流:https://www.goluckyvip.com/tag/100951.html
北俄国际物流:https://www.goluckyvip.com/tag/100952.html
近铁国际物流有限公司:https://www.goluckyvip.com/tag/100953.html
国际危险品快递:https://www.goluckyvip.com/tag/100954.html
国际快递危险品:https://www.goluckyvip.com/tag/100955.html
危险品国际快递:https://www.goluckyvip.com/tag/100956.html
品牌出海新机遇,玩转“新兴”与“王牌”主题沙龙成功举办!:https://www.kjdsnews.com/a/1836370.html
每月资讯 | CBD为您带来最新行业动态:https://www.kjdsnews.com/a/1836371.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流