在前端的移动Web开发中，有一部分事件只在移动端产生，如触摸相关的事件。接下来给大家简单总结一下移动端的事件。
在前端的移动Web开发中，有一部分事件只在移动端产生，如触摸相关的事件。接下来给大家简单总结一下移动端的事件。 1. PC端事件在移动端的兼容问题 1.1 click事件的200~300ms延迟问题 由于移动端默认的布局视口宽度是980像素，所以网页文字非常小，为了快速让网页还原到原来的大小，Safari最新引入了双击缩放功能：用户双击手机页面的时候，浏览器会智能的缩放当前页面到原始大小。 双击缩放的原理就是，当用户click一次之后，浏览器会经过约300ms之后检测是否再有一次click，如果有的话，
2007 苹果推出iphone，浏览器网页在iphone上显示时字体特别小，根本看不清楚
一、事件触发顺序 PC网页上的大部分操作都是用鼠标的，即响应的是鼠标事件，包括mousedown、mouseup、mousemove和click事件。一次点击行为，可被拆解成：mousedown -> mouseup -> click 三步。 手机上没有鼠标，所以就用触摸事件去实现类似的功能。touch事件包含touchstart、touchmove、touchend，注意手机上并没有tap事件。手指触发触摸事件的过程为：touchstart -> touchmove -> touchend。 手机
开发移动端页面，我们通常都会按照一个固定宽度的设计稿来做，但是实际上的手机屏幕尺寸五花八门，如果不进行适配的话会比较影响使用体验。
本文首发于前端面试总结@知乎专栏，各位可以通过点击文章下方的阅读原来来访问原文地址 问题一览 mouseover和mouseenter两个事件有什么区别？ 移动端的click事件行为与PC端有什么不
移动端用tap时会有穿透问题 一：click与tap比较 click与tap都会触发点击事件，但是在手机web端，click会有200-300ms的延迟，所以一般用tap代替click作为点击事件。singleTap 和doubleTap分别代表单次点击和双次点击 二：tap的穿透处理 使用zepto框架的tap的点击事件，来规避click事件的延迟响应，会出现穿透，即点击会触发非当前层的点击事件。 三：穿透原因 问题：在HTML5点击了q以后，弹出b的弹框 因为tap事件是通过document绑定了tou
先上个 demo ，点击全屏查看，切换到移动模拟模式，并点击按钮，查看控制台。发现click没有事件没有触发，而touch事件依然触发。
Safari下使用border-image，不能设置border-color: transparent。
touchstart: // 手指放到屏幕上的时候触发 touchmove: // 手指在屏幕上移动的时候触发 touchend: // 手指从屏幕上拿起的时候触发 touchcancel: // 系统取消touch事件的时候触发。至于系统什么时候会取消，不详 client / clientY：// 触摸点相对于浏览器窗口viewport的位置 pageX / pageY：// 触摸点相对于页面的位置 screenX /screenY：// 触摸点相对于屏幕的位置 identif
前两天正在愁公众号写点什么，打开微信看到uikiller用户「悦雨」遇到了一个问题：
ViewGroup是一组View的组合，在其内部会包含多个子View，当用户点击屏幕的时候，点击的位置可能在ViewGroup上，也可能在其内部View控件上。
在iPhone 3Gs发布的时候，其自带的移动Safari浏览器就提供了一些与触摸(touch)操作相关的新事件。随后，Android上的浏览器也实现了相同的事件。触摸事件(touch)会在用户手指放在屏幕上面的时候、在屏幕上滑动的时候或者是从屏幕上移开的时候出发。下面具体说明：
当同时绑定 touchstart、touchend、click 三个事件的时候，触发的先后顺序是：touchstart -> touchend -> click。正是由于这种 click 事件的滞后性设计从而会产生事件穿透（点击穿透）问题。
HTML+CSS 怎么让一个容器里面不管存在2个子元素还是1个子元素都能垂直居中 2016.06.20~2016.06.24 核心内容 弹性布局 参考答案 实例： <!doctype html> <html> <head> <meta charset="UTF-8"> <title>HTML5学堂</title> <link rel="stylesheet" href="reset.css"> <style> .wrap { width: 500px; height: 500px
android中的事件类型分为按键事件和屏幕触摸事件，Touch事件是屏幕触摸事件的基础事件，有必要对它进行深入的了解。 一个最简单的屏幕触摸动作触发了一系列Touch事件：ACTION_DOWN->ACTION_MOVE->ACTION_MOVE->ACTION_MOVE…->ACTION_MOVE->ACTION_UP 当屏幕中包含一个ViewGroup，而这个ViewGroup又包含一个子view，这个时候android系统如何处理Touch事件呢？到底是ViewGroup来处理Touch事件，还是子view来处理Touch事件呢？我只能很肯定的对你说不一定。呵呵，为什么呢？看看下面我的调查结果你就明白了。 android系统中的每个View的子类都具有下面三个和TouchEvent处理密切相关的方法： 1）public boolean dispatchTouchEvent(MotionEvent ev) 这个方法用来分发TouchEvent 2）public boolean onInterceptTouchEvent(MotionEvent ev) 这个方法用来拦截TouchEvent 3）public boolean onTouchEvent(MotionEvent ev) 这个方法用来处理TouchEvent
ViewGroup的事件分发机制 我们用手指去触摸Android手机屏幕，就会产生一个触摸事件，但是这个触摸事件在底层是怎么分发的呢？这个我还真不知道，这里涉及到操作硬件（手机屏幕）方面的知识，也就是Linux内核方面的知识，我也没有了解过这方面的东西，所以我们可能就往上层来分析分析，我们知道Android中负责与用户交互，与用户操作紧密相关的四大组件之一是Activity, 所以我们有理由相信Activity中存在分发事件的方法，这个方法就是dispatchTouchEvent(),我们先看其源码吧
PS一句：最终还是选择CSDN来整理发表这几年的知识点，该文章平行迁移到CSDN。因为CSDN也支持MarkDown语法了，牛逼啊！
有时候会被别人问起pc端和手机端有什么区别。一般来说都会去说，兼容性啊，适配啊，网页布局这方面的事情，但是我觉得这个问题如果想要拿一个满分应该从区别出发，从如何判断收尾。毕竟你只知道区别没有用，他可能更想让你说出来你是怎么判断的。
Touch事件分发中只有两个主角:ViewGroup和View。ViewGroup包含onInterceptTouchEvent、dispatchTouchEvent、onTouchEvent三个相关事件。View包含dispatchTouchEvent、onTouchEvent两个相关事件。其中ViewGroup又继承于View。 ViewGroup和View组成了一个树状结构，根节点为Activity内部包含的一个ViwGroup。 触摸事件由Action_Down、Action_Move、Aciton
近段时间使用html5开发一个公司内部应用，而触摸事件必然是移动应用中所必须的，刚开始以为移动设备上或许也会支持鼠标事件，原来是不支持的，好在webkit内核的移动浏览器支持touch事件，并且打包成app也毫无压力。原本以为touch事件应该跟鼠标事件是一样的道理，实践过程中虽然不难，但还是碰到了不少坑，才发现还是略有区别的。
在移动开发过程当中，我们经常会遇到手势处理和事件触摸的情况，如果不了解整个事件的处理机制，对于开发的同学和码农是非常痛苦的，但是事件触摸的处理确实是一个非常复杂的过程，细讲起来，估计我都能讲迷糊，这里呢，我只做一些简单的和常用事件的讲解，希望能够帮助大家。 1.概念，什么是事件的派发 事件的派发简单来讲就是Activity将事件派发给容器和控件，容器或控件将事件进一步派发给其子容器和子控件，直到事件最终派发到事件发生的焦点控件上。 2.常用的事件触摸方法 我想对于这些常用的事件触摸方法大家都应该有一定的了解
最近项目不是很忙，自己就用原生js写了一个简单的移动端轮播图的小demo，可实现自动轮播和手势滑动轮播，然后就把它记录到个人博客里。还有很多不足的地方，希望多多指出，以便改进。 1、代码部分 分为四个文件： slideshow.html slideshow.css base.js slideshow.js 1.1、slideshow.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <me
APP开发中，卡顿绝对优化的大头，Google为了帮助开发者更好的定位问题，提供了不少工具，如Systrace、GPU呈现模式分析工具、Android Studio自带的CPU Profiler等，主要是辅助定位哪段代码、哪块逻辑比较耗时，影响UI渲染，导致了卡顿。拿Profile GPU Rendering工具而言，它用一种很直观的方式呈现可能超时的节点，该工具及其原理也是本文的重点：
iPhone拥有很好的用户交互体验，这源于iOS系统对交互事件的高效处理和高优响应； App开发者处理用户交互非常便捷，这源于iOS系统和UIKit对用户操作做了封装和默认处理； 本文围绕iOS的事件传递和处理，探究其具体过程。
performClick（）方法 是使用代码主动去调用控件的点击事件（模拟人手去触摸控件）
在Andrioid开发中，常见的事件如下 单击事件 OnClickListener 长按事件 OnLongClickListener 滑动事件 OnTouchListenner 键盘事件 OnKeyListenner 焦点事件 setOnFoucsChangeListener 设置方式 1.动态设置（最常用的方式） Button btn = (Button) findViewById(R.id.btnTest); btn.setOnClickListener(new View.OnClic
移动端浏览器兼容性较好，我们不需要考虑以前js的兼容性问题，可以放心的使用原生js书写效果，但是移动端也有自己独特的地方。比如触屏事件touch(也称触摸事件)，Android和IOS都有。
一般情况下 CSS 并不会影响 JS 事件，但有一个 CSS 属性则比较特殊，那就是 pointer-events，它可以用来规避鼠标事件，其中大部分属性值只适用于 SVG（可缩放矢量图形）操作，而我们只需要关注其 none 属性值，该值表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。
当系统传递一个touch event，首先会send到一个特定的view。对于touch view来讲，这个view就是被hitTest：withEvent:返回的view；对于shaking-motion event，remote-control事件，action messages，和editing-menu message， view就是firstResponder。如果initial view没有处理event，他就会沿着响应链去查找，顺序为： a) hit-test view或者firstResponder会传递event或者message到它的vc上（如果有的话）；如果没有vc，则将event或者message传到superView上 b) 如果view或者vc不能handle event或者message，会传到view的superview上。 c) 之后的所有superView会根据a、b的模式进行传输，如果无法handle的话 d) view树的最上层的view，如果无法handle event或者message，会把event send到window对象 e) 如果UIWindow对象无法handle的话，会传递到application对象单例上 f) 如果application单例无法处理event或者message，则discards。
完成移动端的开发项目之后，发现谷歌自带的调试器似乎没有什么太大的作用，整天借同事的苹果手机测bug,尽管同事不厌其烦，但还是觉得这iPhone系列适配问题适配到想逃逃逃，好在项目已经顺利完成，测试通过
此篇文章主要实现两个功能： 1、点击屏幕下方签到悬浮按钮； 2、弹出幸运大转盘，转盘抽奖签到 效果如图： 在网上找了很多移动端拖拽的js实现方式，大部分都是这一种，html5的touch事件，但是
随着智能手机普及，有越来越多的手机网页和网页版游戏，手机触摸、移动、旋转等等，多种操作。一般电脑的人机交互靠的是鼠标，而手机用的就是触摸。区别有：
什么是 Touch滑动？就是类似于 PC端的滚动事件，但是在移动端是没有滚动事件的，所以就要用到 Touch事件结合 js去实现，效果如下：
有天，辛苦做了个复杂操作功能的页面，上线后有用户反馈：很多功能使用不了。惊了，以为是哪里出了bug。 立马联系用户，才发现原来是用户使用笔记本电脑，没有禁用触控板，然后不小心碰到导致整个界面都放大，很多功能超出界面不见了。 然而那能怎么办，用户第一，自然得快速解决这个问题，而且是触控板和触摸屏都得解决。
Touch事件的传递机制与生活贴近，从父布局开始一步一步的向下分发事件。分发事件时调用boolean dispatchTouchEvent(MotionEvent ev)；方法。此方法一般不重写它。而直到莫一个控件能够完成此事件时，调用boolean onTouchEvent(MotionEvent event)方法，即可结束。如果直到醉下层的一个view都没发处理这个，就会往父布局回传，依次调用boolean onTouchEvent(MotionEvent event)方法，直到回到最顶层的布局。 Touch事件传递时，每次分发之后，会调用拦截方法boolean onInterceptTouchEvent(MotionEvent ev)方法，拦截后由拦截者来执行。 Touch事件传递拥有记忆功能，处理了一次事件传递，假定底层布局都没发完成事件，最后是由顶层父布局自己处理的。那么，相同事件再次产生的时候，顶层布局就不会向下分配，而是自己直接处理事件。值得注意的是这个记忆只会在一系列事件完成之前有效，也就是从ACTION_DOWN事件开始，直到后续事件 ACTION_MOVE，ACTION_UP结束后，“记忆”的信息就会清除。
下拉刷新在常见的手机app上大多都有运用。下拉刷新即向下拉重新加载、刷新。下拉刷新在下拉到松手的过程中，经历了三个状态分别是：当前手势滑动位置与初始位置差值大于零时，提示正在进行下拉刷新操作。之后当下拉到一定值时，显示松手释放后的操作提示。最后当下拉到达设定最大值松手时，执行回调，提示正在进行更新操作。如下图则为下拉刷新的实现效果：
Android的事件：onClick, onScroll,onFling等等，都是由许多个Touch组成的。其中Touch的第一个状态肯定是ACTION_DOWN,表示按下了屏幕。之后，touch将会有后续事件，可能是：
这种事件传递的结果就会导致以下问题： 一个View把Touch事件消费之后，其他View就无法接收到该事件，也就无法根据这个事件完成与用户的交互
我们在上面《页面分类》的项目中，对 tap 事件的处理使用的是 touch 事件处理的，因为如果使用 click 事件的话，总会有延时。
本文将分析Touch事件的传递。很多复杂的功能都需要深刻的处理Touch事件，例如侧边栏，例如图标的拖动换位。
ontouchstart、ontouchmove、ontouchend、ontouchcancel
转载请注明出处：http://blog.csdn.net/guolin_blog/article/details/9097463
继上一篇分析，今天我们来接着分析Activity的Touch事件是如何分发传递的。 都知道在Android中的事件主要包括三部分内容：分发事件dispatchTouchEvent、拦截事件onInterceptTouchEvent、消费事件onTouchEvent。这几乎是所有开发者都要面临的问题，无论是解决一些事件冲突问题，还是自定义View，都会或多或少涉及到。由于其独特的重要性，大多数面试的时候也基本会有所涉及，所以很好的掌握View的Touch事件传递显得尤其重要。 1、Activi
其实我一直准备写一篇关于Android事件分发机制的文章，从我的第一篇博客开始，就零零散散在好多地方使用到了Android事件分发的知识。也有好多朋友问过我各种问题，比如：onTouch和onTouc
事件有2种，一种是冒泡事件，另一种是非冒泡事件，也叫捕获事件。具体来说，他们都有些什么呢？
一个 TouchList 对象，是包含了如下触点的 Touch 对象：触摸起始于当前事件的目标 element 上，并且仍然没有离开触摸平面的触点。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
