一、事件触发顺序 PC网页上的大部分操作都是用鼠标的，即响应的是鼠标事件，包括mousedown、mouseup、mousemove和click事件。一次点击行为，可被拆解成：mousedown -> mouseup -> click 三步。 手机上没有鼠标，所以就用触摸事件去实现类似的功能。touch事件包含touchstart、touchmove、touchend，注意手机上并没有tap事件。手指触发触摸事件的过程为：touchstart -> touchmove -> touchend。 手机
在前端的移动Web开发中，有一部分事件只在移动端产生，如触摸相关的事件。接下来给大家简单总结一下移动端的事件。
在前端的移动Web开发中，有一部分事件只在移动端产生，如触摸相关的事件。接下来给大家简单总结一下移动端的事件。 1. PC端事件在移动端的兼容问题 1.1 click事件的200~300ms延迟问题 由于移动端默认的布局视口宽度是980像素，所以网页文字非常小，为了快速让网页还原到原来的大小，Safari最新引入了双击缩放功能：用户双击手机页面的时候，浏览器会智能的缩放当前页面到原始大小。 双击缩放的原理就是，当用户click一次之后，浏览器会经过约300ms之后检测是否再有一次click，如果有的话，
2007 苹果推出iphone，浏览器网页在iphone上显示时字体特别小，根本看不清楚
移动端用tap时会有穿透问题 一：click与tap比较 click与tap都会触发点击事件，但是在手机web端，click会有200-300ms的延迟，所以一般用tap代替click作为点击事件。singleTap 和doubleTap分别代表单次点击和双次点击 二：tap的穿透处理 使用zepto框架的tap的点击事件，来规避click事件的延迟响应，会出现穿透，即点击会触发非当前层的点击事件。 三：穿透原因 问题：在HTML5点击了q以后，弹出b的弹框 因为tap事件是通过document绑定了tou
有时候会被别人问起pc端和手机端有什么区别。一般来说都会去说，兼容性啊，适配啊，网页布局这方面的事情，但是我觉得这个问题如果想要拿一个满分应该从区别出发，从如何判断收尾。毕竟你只知道区别没有用，他可能更想让你说出来你是怎么判断的。
本文首发于前端面试总结@知乎专栏，各位可以通过点击文章下方的阅读原来来访问原文地址 问题一览 mouseover和mouseenter两个事件有什么区别？ 移动端的click事件行为与PC端有什么不
HTML5学堂：相对来说，JS在移动端要远远低于PC端的使用频率，因此积累的开发经验并不是太多。在这里简要整理一些JavaScript在移动端的项目经验，主要包括click点击事件延迟、元素高亮点击区、zepto的touch问题等。 移动端click时间300ms延迟 在移动端，click点击事件会造成300ms的延迟，造成这种延迟的原因在于：当用户一次点击屏幕之后，浏览器并不能立刻判断用户是要进行双击缩放，还是想要进行单击操作。因此，浏览器就等待 300 毫秒，以判断用户是否再次点击了屏幕。 对于这种体验
开发移动端页面，我们通常都会按照一个固定宽度的设计稿来做，但是实际上的手机屏幕尺寸五花八门，如果不进行适配的话会比较影响使用体验。
前两天正在愁公众号写点什么，打开微信看到uikiller用户「悦雨」遇到了一个问题：
完成移动端的开发项目之后，发现谷歌自带的调试器似乎没有什么太大的作用，整天借同事的苹果手机测bug,尽管同事不厌其烦，但还是觉得这iPhone系列适配问题适配到想逃逃逃，好在项目已经顺利完成，测试通过
ViewGroup的事件分发机制 我们用手指去触摸Android手机屏幕，就会产生一个触摸事件，但是这个触摸事件在底层是怎么分发的呢？这个我还真不知道，这里涉及到操作硬件（手机屏幕）方面的知识，也就是Linux内核方面的知识，我也没有了解过这方面的东西，所以我们可能就往上层来分析分析，我们知道Android中负责与用户交互，与用户操作紧密相关的四大组件之一是Activity, 所以我们有理由相信Activity中存在分发事件的方法，这个方法就是dispatchTouchEvent(),我们先看其源码吧
当系统传递一个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。 立马联系用户，才发现原来是用户使用笔记本电脑，没有禁用触控板，然后不小心碰到导致整个界面都放大，很多功能超出界面不见了。 然而那能怎么办，用户第一，自然得快速解决这个问题，而且是触控板和触摸屏都得解决。
这种事件传递的结果就会导致以下问题： 一个View把Touch事件消费之后，其他View就无法接收到该事件，也就无法根据这个事件完成与用户的交互
一、 问题背景 最近研究了一下Android手机上用户操作的模拟方法， 有一些心得与大家分享下。 之所以去研究Android手机上用户操作的模拟方法，是因为最近做毕业设计,想尝试开发Android的UI自动化测试。最开始使用MonkeyRunner来录制脚本,开发过程中发现在MonkeyRunner上录制时，模拟拖拽的操作不方便。 接着我又尝试自己通过Monkey中的同样的方法进行用户操作的模拟，结果运行的时候出了Injecting to another application requires INJE
本文将分析Touch事件的传递。很多复杂的功能都需要深刻的处理Touch事件，例如侧边栏，例如图标的拖动换位。
在iPhone 3Gs发布的时候，其自带的移动Safari浏览器就提供了一些与触摸(touch)操作相关的新事件。随后，Android上的浏览器也实现了相同的事件。触摸事件(touch)会在用户手指放在屏幕上面的时候、在屏幕上滑动的时候或者是从屏幕上移开的时候出发。下面具体说明：
HTML5学堂：今天要与大家分享一个当前移动端很常见的效果，类似于手机联系人的快速导航功能，即当触摸a~z的字母时，能够相对应的显示文字。有些手机的音乐导航也类似，具体可详见下图： touchmove
APP开发中，卡顿绝对优化的大头，Google为了帮助开发者更好的定位问题，提供了不少工具，如Systrace、GPU呈现模式分析工具、Android Studio自带的CPU Profiler等，主要是辅助定位哪段代码、哪块逻辑比较耗时，影响UI渲染，导致了卡顿。拿Profile GPU Rendering工具而言，它用一种很直观的方式呈现可能超时的节点，该工具及其原理也是本文的重点：
ViewGroup是一组View的组合，在其内部会包含多个子View，当用户点击屏幕的时候，点击的位置可能在ViewGroup上，也可能在其内部View控件上。
Safari下使用border-image，不能设置border-color: transparent。
介绍 第一次写小程序，记录一下遇到的需求以及解决方法。可能功能不是很难，主要是做下记录。为以后遇到相同的需求做铺垫。 什么是左滑删除 用过QQ的人都知道，消息列表内，左滑单个聊天可以删除、置顶的操作。
一个 TouchList 对象，是包含了如下触点的 Touch 对象：触摸起始于当前事件的目标 element 上，并且仍然没有离开触摸平面的触点。
会调用event的preventDefault()可以阻止默认情况的发生：阻止页面滚动
先上个 demo ，点击全屏查看，切换到移动模拟模式，并点击按钮，查看控制台。发现click没有事件没有触发，而touch事件依然触发。
截图是我们日常开发经常会遇到的一个功能，最近工作遇到的需求又升级了，需要实现长图文的截图功能，经常查找相关资料终于实现了，支持截取微博、知乎、今日头条等第三方APP……
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
touchstart: // 手指放到屏幕上的时候触发 touchmove: // 手指在屏幕上移动的时候触发 touchend: // 手指从屏幕上拿起的时候触发 touchcancel: // 系统取消touch事件的时候触发。至于系统什么时候会取消，不详 client / clientY：// 触摸点相对于浏览器窗口viewport的位置 pageX / pageY：// 触摸点相对于页面的位置 screenX /screenY：// 触摸点相对于屏幕的位置 identif
iPhone拥有很好的用户交互体验，这源于iOS系统对交互事件的高效处理和高优响应； App开发者处理用户交互非常便捷，这源于iOS系统和UIKit对用户操作做了封装和默认处理； 本文围绕iOS的事件传递和处理，探究其具体过程。
介绍 第一次写小程序，记录一下遇到的需求以及解决方法。可能功能不是很难，主要是做下记录。为以后遇到相同的需求做铺垫。 什么是左滑删除 用过QQ的人都知道，消息列表内，左滑单个聊天可以删除、置顶的操作。对于移动端窄小的屏幕来说，这种交互可以说是非常的节省地方。故受到了众多产品狗的喜爱。 [image] 实现原理 最外层一个view水平方向排列，里面包含一个内容区view,一个操作区view 让你要展示的布局充满屏幕，通过css样式让超出的删除按钮隐藏 监听touch事件，平移布局显示和隐藏删除按钮(列表每一项
在移动开发过程当中，我们经常会遇到手势处理和事件触摸的情况，如果不了解整个事件的处理机制，对于开发的同学和码农是非常痛苦的，但是事件触摸的处理确实是一个非常复杂的过程，细讲起来，估计我都能讲迷糊，这里呢，我只做一些简单的和常用事件的讲解，希望能够帮助大家。 1.概念，什么是事件的派发 事件的派发简单来讲就是Activity将事件派发给容器和控件，容器或控件将事件进一步派发给其子容器和子控件，直到事件最终派发到事件发生的焦点控件上。 2.常用的事件触摸方法 我想对于这些常用的事件触摸方法大家都应该有一定的了解
多个Listview瀑布流效果 效果展示 原理解释 自定义MyLinearLayout，继承至LinearLayout，在布局文件中，将3个listview放置在MyLinearLayout中。 重写
PS一句：最终还是选择CSDN来整理发表这几年的知识点，该文章平行迁移到CSDN。因为CSDN也支持MarkDown语法了，牛逼啊！
下拉刷新在常见的手机app上大多都有运用。下拉刷新即向下拉重新加载、刷新。下拉刷新在下拉到松手的过程中，经历了三个状态分别是：当前手势滑动位置与初始位置差值大于零时，提示正在进行下拉刷新操作。之后当下拉到一定值时，显示松手释放后的操作提示。最后当下拉到达设定最大值松手时，执行回调，提示正在进行更新操作。如下图则为下拉刷新的实现效果：
在微信开发中，单纯的页面展示并不能够吸引客户的眼球，需要有视觉和听觉的双重效果，才能够吸引住客户浏览，达到产品宣传的目的，前面说过很多页面的特效，今天我来说一种听觉上的效果，就是加上背景音乐，如何能够吸引住客户，那就需要你自己去选择合适的音乐了。废话不多说了，直接了看代码吧
当同时绑定 touchstart、touchend、click 三个事件的时候，触发的先后顺序是：touchstart -> touchend -> click。正是由于这种 click 事件的滞后性设计从而会产生事件穿透（点击穿透）问题。
继上一篇分析，今天我们来接着分析Activity的Touch事件是如何分发传递的。 都知道在Android中的事件主要包括三部分内容：分发事件dispatchTouchEvent、拦截事件onInterceptTouchEvent、消费事件onTouchEvent。这几乎是所有开发者都要面临的问题，无论是解决一些事件冲突问题，还是自定义View，都会或多或少涉及到。由于其独特的重要性，大多数面试的时候也基本会有所涉及，所以很好的掌握View的Touch事件传递显得尤其重要。 1、Activi
SmartSwipe是一个Android侧滑处理框架，它封装了对控件侧滑事件（上/下/左/右4个方向滑动的手势事件）的捕获、分发及多点交替滑动的处理，基于SmartSwipe我们可以为控件添加各种你想要的侧滑效果。
近段时间使用html5开发一个公司内部应用，而触摸事件必然是移动应用中所必须的，刚开始以为移动设备上或许也会支持鼠标事件，原来是不支持的，好在webkit内核的移动浏览器支持touch事件，并且打包成app也毫无压力。原本以为touch事件应该跟鼠标事件是一样的道理，实践过程中虽然不难，但还是碰到了不少坑，才发现还是略有区别的。
练习操作：直CClayer子类init在 this->setTouchEnabled(true);
https://github.com/anzaizai/EasySwipeMenuLayout
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
到目前为止，互联网行业里，手机越来越智能化，移动端占有的比例越来越高，尤其实在电商，新闻，广告，游戏领域。用户要求越来越高，网站功能越来越好，效果越来越炫酷，这就要求我们产品质量越来越高，web前端开发而言是一个挑战，是一个难题，也是一个机遇。如何让我们所开发的手机页面能有更好的交互体验，就是这篇文章的主旨：移动web开发问题和优化小结。这个只是我自己在开发的时候知道的坑，如果大家有遇到什么别的坑，欢迎补充，或者觉得我哪里写错了，欢迎指点！
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
云直播
