mobile_点透_传透_touch-action
点透(传透)
<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的更多相关文章
- 前台的url通过 ActionName?var1=xx&var2=yy 的形式传给特定action
本文对自己开发的基于lucene和J2EE技术的搜索引擎开发经验进行简单总结.今后可能会从性能的角度总结lucene开发经验.当数据上TB级别后,分布式lucene以及结合分布式文件系统(如HDFS) ...
- 实时竞价RTB广告平台_传漾科技_中国领先的智能数字营销引擎
实时竞价RTB广告平台_传漾科技_中国领先的智能数字营销引擎 Programmatic Framework™ 传漾程序化购买框架
- jsp页面传参到action出现乱码
jsp页面以连接方式传参到后台action时( <a href="http://localhost:8080/SocialBook/pages/bookdetail?book.id=& ...
- 将 jsp 页面的值 传到struts2 action中(不是表单中的值)
JSP: 页面: <%@ page language="java" pageEncoding="GBK"%> <%@taglib prefi ...
- day8——ajax传参到action(Struts2)
第一种:url+?+参数 jsp中: $(function(){ $("[name='delemp']").click(function(){ $this = $(this); $ ...
- js对象传到后台ACTION使用
需的包 <script type="text/javascript" src="s"></script>gson-1.2.3.jar谷歌 ...
- 4_爬NMPA药监总局_动态加载_传ID
http://scxk.nmpa.gov.cn:81/xk/ import requests url = 'http://scxk.nmpa.gov.cn:81/xk/itownet/portalAc ...
- 4G DTU为什么要具有透传的功能
4G DTU为什么要透传 透传的目的就是为了在数据传输的过程中不对数据做任何出来,实现发送方和接收方的数据完全一样,长度和内容完全没有变化.它主要是使用在智能设备之间的远程串口数据传输,是一种和传输方 ...
- Struts2 Action 动态传参数
Struts2的两个Action之间传参的问题. 需求功能是这样:Action1 获取数据库配置内容,得到相应Model的 动态URL ,这里的URL 有的是Action有的是JSP页面. 1.使用r ...
随机推荐
- I/O模型
目录: IO模型 阻塞IO 非阻塞IO IO多路复用 异步IO 总结: 1.阻塞IO模型 多线程 多进程 线程池 进程池 全是阻塞IO 2.非阻塞IO 协程是一种非阻塞IO 1.setblocking ...
- 第五节:从源码的角度理解各种Result(ActionResult、JsonResult、JavaScriptResult等)
一. 背景 提到MVC不得不说MVC中的各种Result,这些高度封装的xxxResult以及在xxxResult再度封装的xxx,大大提高了MVC框架的开发效率. 相信做过MVC开发的朋友都会用到过 ...
- 第一节:框架前期准备篇之Log4Net日志详解
一. Log4Net简介 Log4net是从Java中的Log4j迁移过来的一个.Net版的开源日志框架,它的功能很强大,可以将日志分为不同的等级,以不同的格式输出到不同的存储介质中,比如:数据库.t ...
- Shell 自动化部署免密登录
1 .配置主机名称 参考:Linux 修改主机名 和 ip 映射关系 2 . 编写脚本 root.sh 内容 #!/bin/bash SERVERS="hadoop0 hadoop1 had ...
- Hello jna
记录下这几天用jna3.5.0调c++写的dll的经历 os:win7 用jna调dll首先需要一个dll文件并有可调的方法,然后根据方法的名称,参数,返回值编写一个interface c++需要包含 ...
- 【洛谷P1303A*Bprublem】
题目描述 求两数的积. 输入输出格式 输入格式: 两行,两个数. 输出格式: 积 输入输出样例 输入样例#1: 1 2 输出样例#1: 2 说明 每个数字不超过10^2000,需用高精 这道题还是比较 ...
- 解决前后端分离后的Cookie跨域问题
一. 前端Ajax关键配置 $.ajax({ type: "post", url: xxx, data: xxx, contentType: 'application/json', ...
- docker简单介绍---网络端口管理
一.查看docker支持的网络类型 docker network ls bridge:容器使用虚拟交换机的进行通信 host:使用宿主机的网络 none:只给容器分配一个lo的网卡,无法和外界进行通信 ...
- javascript事件委托的原理与实现
事件委托 事件流 捕获:查找目标元素: 目标:执行目标的事件: 冒泡:依次执行祖先元素的事件. onmouseenter和onmouseleave不支持冒泡: onmouseover和onmouseo ...
- [C#.Net]全局钩子实现USB扫码枪无焦点状态下扫入
https://www.cnblogs.com/masonlu/p/10105135.html