移动端触摸事件 事件防误触 以及 1物理像素问题 移动端的主要三个事件
分别对用 PC 端事件的
移动端中有很多的默认事件
比如长按某个文本时 ， 能够选中复制 。这样对于很多业务是不符合逻辑的 ， 因此我们先来阻止默认事件 。
>// 阻止移动端默认事件window.onload = function () {document.addEventListener('touchstart', function (ev) {ev = ev || eventev.preventDefault()// console.log(ev.cancelable)是否可阻止默认事件 ， 输出 true, false})}
但是阻止默认行为之后 ， 有两个很大的缺陷就是 ， 所有的滚动条都会失效 和 会出现事件点透现象 。
事件点透现象该怎么解决呢？
事件点透 ， 两个重合的元素 ， 明明事件要执行的是第一个元素的方法 ， 但是却还执行了另一个元素的方法 。举个例子 ， 比如说一个 a 标签 和一个 div 盒子定位到了一起 ， 监听div盒子的事件点击 ， 点击出后让他出现一个背景色 ， 但是也执行了跳转事件 。

文章插图
最好的移动端跳转方案 ， 且有防误触
Document百度>// 阻止默认事件document.addEventListener('touchstart', function(ev) {ev = ev || eventev.preventDefault()})// 阻止默认事件之后 ， 会发生 a标签点击不起作用 ， 也就是说a标签的跳转事件被阻止了// 下面就是移动端的点击事件解决方案 ， 且拥有防误触功能let aNode = document.querySelector('a')aNode.addEventListener('touchstart', function() {this.isMoved = false})aNode.addEventListener('touchmove', function() {this.isMoved = true})aNode.addEventListener('touchend', function() {if(!this.isMoved) {location.href = http://www.kingceram.com/post/this.href}})
【移动端触摸事件 事件防误触 以及 1物理像素问题】event =>
移动端的 event 中一个重要属性就是  ，  利用它可以获取到触摸的位置
移动端常见问题 禁止电话和邮箱
122
// 无效122// 有效9090877876@qq.com// 有效
解决 a 链接点击高亮问题

文章插图
>a {text-decoration: none;-webkit-tap-highlight-color: none;}1671671671
解决按钮圆角渲染
>input {-webkit-appearance: none;}
解决 Foot字体放大
>p {font-size: 30px;max-height: 9999999px;}cujewfscjsdhcujkhbjcsdhcj

1 物理像素的问题 淘宝方案
Document>* {margin: 0;padding: 0;}.line {width: 16rem;height: 1px;margin-top: 1rem;background-color: #000;}

• 上一页
• 1
• 2
• 下一页

• 邮箱邮件服务器迁移服务器要多久生效,将设置从电子邮件路由器迁移到服务器端同步
• 但是实际上端口并未被占用 一篇文章带你解决代理提示端口被占用
• 物联网专业课程设计：温室监控系统——移动终端篇（LineChart、SQLite
• 第五届字节青训营笔试后端编程练习题解
• Web前端学习笔记——VueJS-APP案例
• 445端口简介及端口排除法关闭445端口
• 445端口是啥？445端口怎么关闭？
• SNMP协议详细介绍及SNMP监控LXD端口流量
• 1+X Web前端开发初级 例题 JavaScript轮播图
• 高通计划停用MSM 以SDM为移动平台命名【转】