zoukankan      html  css  js  c++  java
  • 屏蔽移动端浏览器的长按事件

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

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

      1.添加事件   ontouchstart = "return false;"

      2.css统一加上 -webkit-user-select:none; -webkit-touch-callout:none;

      但是上述方法对页面的其他需求有影响,最终我采用的方法是,写一个空的透明的DIV置于页面最上层遮住所有元素,这样就可以避免系统的长按事件,在需要屏蔽长按事件时,隐藏DIV即可,DIV样式:{position:fixed;100%;height:100%;z-index:99;background:rgba(255,255,255,0);overflow:hidden;top:0px;left:0px;}

    PS:过程中还遇到一下小问题就是,在需要长按二维码识别的页面,已经移除了当前页面的遮罩DIV,但是长按还是没反应。

      二维码开始样式是:{46%;position:fixed;left:27%;top:40%;}

      后来发现必须给二维码加上层高 z-index:100;大于遮罩DIV的层高。

    水袂分处,劳劳新亭;春风过耳,呦呦鹿鸣。 折柳为君,清余在心;人间流往,水墨无痕。 悠然来矣,思然去矣;片花飞融,时不在矣……
  • 相关阅读:
    反射-基础方法-java
    排序-插入-java
    排序-选择-java
    决策树
    python基础2 -画图
    python基础1
    如何实现用户的历史记录功能(最多n条)
    如何让字典保持有序
    如何快速找到多个字典中的公共键(key)
    如何根据字典中值的大小, 对字典中的项排序
  • 原文地址:https://www.cnblogs.com/zhengsha/p/5053568.html
Copyright © 2011-2022 走看看