点透(传透)

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />

PC  的 click 事件 在移动端,会有 300 ms 的延迟。就是因为避免和手机双击行为发生冲突

  • 点透现象:(面试题)
  • 轻轻触碰 box ,box 消失

当点击 非文字覆盖区域 时,盒子正常消失。

当点击 文字区域时,页面发生跳转。

  • 理想情况:

无论点击哪个区域,只要是点击盒子,盒子都消失,而不影响 a

  • 解决方案1:(面试阐述)

click    事件监听,

缺点: PC 端的 click 事件 在 移动端有 300 ms 的延迟

  • 解决方案2(模拟器测试无效, 移动端有效):

让 a 元素不能跳转,即取消浏览器的默认行为

  • document.addEventListener("touchstart", function(e){
    e.preventDefault();
    }, false);

② box 盒子消失,点击 a 元素,a 应该跳转,即给 a 元素指定一个全新的跳转动作

  •     // 点透(传透)
    (function(){
    // 1. 取消默认行为
    document.addEventListener("touchstart", function(e){
    e.preventDefault();
    }, false); var aNodes = document.querySelectorAll('a');
    for (var i=0;i<aNodes.length;i++) {
    aNodes[i].addEventListener('touchstart',function(){
    window.location = this.href; // 2. 获取 a 的跳转地址, 交给 window 实现跳转
    }, false);
    };
    })();
    /**** 模拟器测试无效, 实际测试有效
    window.location 是一个只读对象,所有字母必须小写
    但是仍然可以赋予一个对象 DOMString
    两种写法,效果一致
    window.location = "https://www.baidu.com";
    window.location.href = "https://www.baidu.com";
    ****/

关于浏览器报错

  • [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See…

是因为在取消浏览器默认行为后,浏览器将触屏事件识别为被动,而报错

  • 需求:

会影响交互操作,例如,自定义滚动,或者元素拖拽效果等,
会触发浏览器原生的滚动,产生不好的交互体验效果

  • 解决:

1. 加入 css    //

  • html {
    touch-action: none;
    }

缺点:

  • iOS Safari浏览器不支持
  • 干掉了可能需要的原生的touch相关行为

2. 直接传递 {passive:false} ,告诉浏览器是主动要求阻止默认行为的,解决 treated as passive 错误

  •         document.addEventListener("touchstart", function(e){
    e.preventDefault();
    }, {passive: false});

总结:

在使用以上方法去除错误后,
需要自定义所有 点击,滑动,缩放等等事件!!!
否则你就会出现滑动失效这一类的错误了!

touch-action: auto;

移动端一个与手势触摸密切相关的 CSS 属性,

源自windows phone手机, 后被广大浏览器引入

移动端可以畅行的CSS属性

可选值: 

  • touch-action: auto;

默认值,表示手势操作什么的完全有浏览器自己决定

  • touch-action: manipulation;

浏览器只允许进行滚动和持续缩放操作,类似双击缩放这种非标准操作就不可以。

想当初,click事件在移动端有个300ms延时,就是因为避免和手机双击行为发生冲突

设置后就干掉了双击行为,避免浏览器click事件300ms延时问题

有了 touch-action:manipulation,我们可以在网页中放心大胆使用click事件了

auto 和 manipulation 是 Safari 唯一支持的两个 touch-action 属性值

其他关键字,正如字面意思,要么只能左移,要么只能左右移动,要么只能右移之类

  • touch-action: none;

不进行任何touch相关默认行为

例如,你想用手指滚动网页就不行,双击放大缩小页面也不可以,所有这些行为要自定义

任意组合如: touch-action: pan-left pan-up pan-zoom; 表示可以左移,上移和缩放。

  • touch-action: pinch-zoom;

手指头可以用来缩放页面

  • touch-action: pan-x;

手指头可以水平移来移去

  • touch-action: pan-left;

手指头可以往左移动,移动开始后还是可以往右恢复的

  • touch-action: pan-right;

手指头可以可以往右移动,移动开始后还是可以往左恢复的

  • touch-action: pan-y;

手指头可以垂直移来移去

  • touch-action: pan-up;

手指头可以往上移,移动开始后还是可以往下恢复的

  • touch-action: pan-down;

手指头可以往下移,移动开始后还是可以往上恢复的

mobile_点透_传透_touch-action的更多相关文章

  1. 前台的url通过 ActionName?var1=xx&var2=yy 的形式传给特定action

    本文对自己开发的基于lucene和J2EE技术的搜索引擎开发经验进行简单总结.今后可能会从性能的角度总结lucene开发经验.当数据上TB级别后,分布式lucene以及结合分布式文件系统(如HDFS) ...

  2. 实时竞价RTB广告平台_传漾科技_中国领先的智能数字营销引擎

    实时竞价RTB广告平台_传漾科技_中国领先的智能数字营销引擎 Programmatic Framework™ 传漾程序化购买框架

  3. jsp页面传参到action出现乱码

    jsp页面以连接方式传参到后台action时( <a href="http://localhost:8080/SocialBook/pages/bookdetail?book.id=& ...

  4. 将 jsp 页面的值 传到struts2 action中(不是表单中的值)

    JSP: 页面: <%@ page language="java"  pageEncoding="GBK"%> <%@taglib prefi ...

  5. day8——ajax传参到action(Struts2)

    第一种:url+?+参数 jsp中: $(function(){ $("[name='delemp']").click(function(){ $this = $(this); $ ...

  6. js对象传到后台ACTION使用

    需的包 <script type="text/javascript" src="s"></script>gson-1.2.3.jar谷歌 ...

  7. 4_爬NMPA药监总局_动态加载_传ID

    http://scxk.nmpa.gov.cn:81/xk/ import requests url = 'http://scxk.nmpa.gov.cn:81/xk/itownet/portalAc ...

  8. 4G DTU为什么要具有透传的功能

    4G DTU为什么要透传 透传的目的就是为了在数据传输的过程中不对数据做任何出来,实现发送方和接收方的数据完全一样,长度和内容完全没有变化.它主要是使用在智能设备之间的远程串口数据传输,是一种和传输方 ...

  9. Struts2 Action 动态传参数

    Struts2的两个Action之间传参的问题. 需求功能是这样:Action1 获取数据库配置内容,得到相应Model的 动态URL ,这里的URL 有的是Action有的是JSP页面. 1.使用r ...

随机推荐

  1. DirectX11 With Windows SDK--12 深度/模板状态、平面镜反射绘制

    前言 深度/模板测试使用的是与后备缓冲区同等分辨率大小的缓冲区,每个元素的一部分连续位用于深度测试,其余的则用作模板测试.两个测试的目的都是为了能够根据深度/模板状态需求的设置来选择需要绘制的像素. ...

  2. 2018-2019-2 《Java程序设计》第3周学习总结

    20175319 2018-2019-2 <Java程序设计>第3周学习总结 教材学习内容总结 第三周通过课本与蓝墨云上的视频学习了<Java2实用教程>第四章类与对象 成功激 ...

  3. Vim使用技巧:将Tab转换为4个空格

    一 Tab转成4个空格 为了防止因为在不同系统中Tab键的宽度不一致而导致代码缩进显示混乱的情况,有必要将Tab键转换成空格,推荐的空格数为4.将下面的代码写入你的.vimrc文件中即可实现在Vim编 ...

  4. 第四节:Task的启动的四种方式以及Task、TaskFactory的线程等待和线程延续的解决方案

    一. 背景 揭秘: 在前面的章节介绍过,Task出现之前,微软的多线程处理方式有:Thread→ThreadPool→委托的异步调用,虽然也可以基本业务需要的多线程场景,但它们在多个线程的等待处理方面 ...

  5. Saltstack自动化操作记录(2)-配置使用

    之前梳理了Saltstack自动化操作记录(1)-环境部署,下面说说saltstack配置及模块使用: 为了试验效果,再追加一台被控制端minion机器192.168.1.118需要在master控制 ...

  6. innobackupex的流备份【转】

    并行备份 innobackupex -p123123 --parallel= /backup 节流备份(节省IO) innobackupex -p123123 --throttle= /backup ...

  7. Elasticsearch JAVA api轻松搞定groupBy聚合

    本文给出如何使用Elasticsearch的Java API做类似SQL的group by聚合. 为了简单起见,只给出一级groupby即group by field1(而不涉及到多级,例如group ...

  8. [Linux]权限s权限和t权限

    问题 在<Unix高级编程>第4.9章节中描述了函数chmod()的参数mode常量值 当中S_ISUID.S_ISGID.S_ISVTX三个常量让人困惑. 分析 通过查阅文档,发现这几个 ...

  9. Coverity代码扫描工具

    1.说明:Coverity代码扫描工具可以扫描java,C/C++等语言,可以和jenkins联动,不过就是要收钱,jenkins上的插件可以用,免费的,适用于小的java项目 2.这是Coverit ...

  10. TortoiseGit安装使用简单教程

    一.简介 TortoiseGit是Tortoise基于git的可视化管理工具.本文即将介绍这个工具的安装和简单使用教程(本文均是基于Windows 64位操作系统). git的管理工具有很多.Tort ...