开发移动端页面，我们通常都会按照一个固定宽度的设计稿来做，但是实际上的手机屏幕尺寸五花八门，如果不进行适配的话会比较影响使用体验。
在初学JS的过程中，所有的事件都是一个 onclick 但是这个事件是不太合适的。
vant官网地址 https://vant-contrib.gitee.io/vant/#/zh-CN/
在移动端如果使用局部滚动，意思就是我们的滚动在一个固定宽高的div内触发，将该div设置成overflow:scroll/auto;来形成div内部的滚动，这时我们监听div的onscroll发现触发的时机区分android和ios两种情况，具体可以看下面表格:
其中有三个相似的属性touches、targetTouches 及changedTouches，它们有什么不同呢？
1、HTML5 中， PC 端基于鼠标的界面互动主要是单击， 移动端界面交互方式主要是触摸。
用于分组， group 也可以嵌套 group，父容器的属性会叠加在子属性上, 比如：
在移动设备上，滚动一个视图不会立即停止滚动，往往需要再滑动一小段距离然后再停止，模拟出惯性的效果。滑动的时候速度越快，那么就滚动的越远。一般组件都会帮开发者写好这些基本功能，不需要开发者操心。但有的时候我们需要使用类似的逻辑，比如我需要在手指滑动后，通过一些列序列帧变化来显示动画，那么这时候就可能需要开发者自己来写这个惯性滑动的逻辑了。不管怎样，我们用Rx来实现一遍这个惯性滑动，也是一种不错的体验。
回调函数原理：函数可以作为一个参数。将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数，这个过程就叫做回调。
为了方便大家写代码，vue.js给大家提供了很多方便的修饰符，比如我们经常用到的取消冒泡，阻止默认事件等等~
在前端的移动Web开发中，有一部分事件只在移动端产生，如触摸相关的事件。接下来给大家简单总结一下移动端的事件。
在前端的移动Web开发中，有一部分事件只在移动端产生，如触摸相关的事件。接下来给大家简单总结一下移动端的事件。 1. PC端事件在移动端的兼容问题 1.1 click事件的200~300ms延迟问题 由于移动端默认的布局视口宽度是980像素，所以网页文字非常小，为了快速让网页还原到原来的大小，Safari最新引入了双击缩放功能：用户双击手机页面的时候，浏览器会智能的缩放当前页面到原始大小。 双击缩放的原理就是，当用户click一次之后，浏览器会经过约300ms之后检测是否再有一次click，如果有的话，
本文将用一个极简的例子详细讲解如何用原生JS一步步实现完整的图片预览和查看功能，无任何第三方依赖，兼容PC与H5，实现了触屏双指缩放等，干货满满。
事件类型： DOM3级事件规定了以下几类事件；如下： UI事件： 当用户与页面上的元素交互时触发； load事件：当页面加载完后(包括所有图像，所有javascript文件，css文件等外部资源)，就会触发window上面的load事件，如下代码是加载图片的： HTML代码： JS代码如下： var img = document.getElementById("img"); EventUtil.addHandler(img,'load',fu
有天，辛苦做了个复杂操作功能的页面，上线后有用户反馈：很多功能使用不了。惊了，以为是哪里出了bug。 立马联系用户，才发现原来是用户使用笔记本电脑，没有禁用触控板，然后不小心碰到导致整个界面都放大，很多功能超出界面不见了。 然而那能怎么办，用户第一，自然得快速解决这个问题，而且是触控板和触摸屏都得解决。
移动端浏览器兼容性较好，我们不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果，但是移动端也有自己独特的地方。比如触屏事件 touch（也称触摸事件），Android 和 IOS 都有。touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。
做画图板，自然使用html5的canvas来实现了。在canvas中我们可以画圆，画矩形，画自定义的线条等等。这次主要使用的画圆跟画线条来实现。html中支持对触摸事件的响应。
事件流 这一概念源自于对事件触发对象的思考。例如常见的点击事件，鼠标移动事件。这些事件发生之时，往往不只是点击或者移动到某一特定元素上。 比如点击某一个按钮，而它是由上一层的父标签，或许在上一层还有父标签甚至是整个页面。因此点击一个元素可以看成是同时点击了父标签或者整个页面。那么此时事件应该怎么响应到指定标签呢？ 事件冒泡 即事件从指定元素开始传播到最外层的元素，并且该事件不仅会在指定元素上发生，还会在传播过过程中的每一个元素上发生。 <html> <body> 02
前几天上网打开163首页时，发现页面底部莫名其妙的出现一个边框。这在以前可是未曾有过的，而且以后也绝不可能会有这么丑陋的设计。
请注意，本文编写于 2082 天前，最后修改于 173 天前，其中某些信息可能已经过时。
随着智能手机普及，有越来越多的手机网页和网页版游戏，手机触摸、移动、旋转等等，多种操作。一般电脑的人机交互靠的是鼠标，而手机用的就是触摸。区别有：
本文首发于前端面试总结@知乎专栏，各位可以通过点击文章下方的阅读原来来访问原文地址 问题一览 mouseover和mouseenter两个事件有什么区别？ 移动端的click事件行为与PC端有什么不
有些程序处理用户的直接输入，比如鼠标和键盘动作。这种输入方式不是组织整齐的数据结构 - 它是一次一个地，实时地出现的，并且期望程序在发生时作出响应。
屏幕是用户和Android设备交互的主要媒介，屏幕分为触屏和非触屏。Android设备目前有四种类型：Android Phone，Android Tablet，Android Wear和Android TV。Android TV大都使用非触屏，其他三类设备则大都使用触屏。对非触屏设备，用户可以通过键盘鼠标或遥控器在屏幕上操作。对触屏设备，用户主要通过手指或触控笔等工具在屏幕上操作，当然也可以通过外接的键盘，鼠标和轨迹球等工具来操作。
常用快捷键 文件重命名 F2 文件 / 内容 全选 Ctrl + A CV 复制粘贴 剪切操作 Ctrl + X ，配合粘贴可完成移动操作 显示桌面 Win + D 切换程序的 Ctrl + Tab
HTML5中新添加了很多事件，但是由于他们的兼容问题不是很理想，应用实战性不是太强，所以在这里基本省略，咱们只分享应用广泛兼容不错的事件，日后随着兼容情况提升以后再陆续添加分享。今天为大家介绍的事件主要是触摸事件：touchstart、touchmove和touchend。
对于每一位设计师的日常工作来说，如何有效阐述自己的方案是非常关键的一步，如果只是一张原型图方案，无论标注得多么清楚，都会有一定的沟通理解成本，所以通常都会需要一个原型demo来帮助大家对方案进行直观的演示，以此阐明方案的各类细节、操作体验等等。为了帮助大家在移动互联网时代，快速、简单地制作原型demo，Demoo应运而生。 Demoo是基于web设计搭建的一款在浏览器内进行可视化操作的工具。通过上传平面稿件，用手势或触点热区的方式把界面关系连接起来，加入连接转场特效，输出一份仿真APP的、可体验操作的设计方
1. 滑动事件获取手指位置 滑动事件的三个动作： [在这里插入图片描述] 获取手指的位置就涉及到坐标的概念，通过获取到 x、y、z就可以缺任意一个点的位置 [在这里插入图片描述] 手机中的坐标： [在这里插入图片描述] 除了 x、y轴，还有z轴，在鸿蒙手机当中，完整的坐标如下，是一个立体的三维体系，但平时z轴用的非常少，一般情况只需考虑x、y轴就行了。 [在这里插入图片描述] 结合滑动事件的三个动作和坐标来分析滑动 [在这里插入图片描述] [在这里插入图片描述] [在这里插入图片描述] 2. 获取按下时手指
2. 第2部分write.js 第二部分决定先介绍write部分，因为controller部分必须要结合write部分才能看到效果。 针对write.js部分，前面有介绍，是用来实现通过鼠标（手指）写字的核心部分。 分析一下要做的事情。
如何更好地使用笔记本的触控板（Touchpad）？ 1. 轻敲即可代替按钮 在Touchpad上轻敲如同按鼠标左按钮，轻敲通常比单按按钮更方便、更容易，轻敲两次如同按钮两次。 2. 不用按钮而实行拖放 您经常需要按住鼠标按钮来移动游标 (例如, 在荧幕中移动图示或视窗)，这个动作被称为拖放，当您使用Touchpad 时，您可不用按钮而进行拖放。 若要实行拖放，轻敲两次(即：下-上-下)； 第二次轻敲后将您的手指放在 Touchpad 上。(一些人称这个动作为轻敲一次半)。您就会一直处于拖放状态中 (好似按住鼠标左按钮)，直到您的手指离开Touchpad，拖放才会停止。 3. 实现滚动功能 在Windows中，一但您安装了鼠标触控板的驱动程序，当您要在各种窗口中拖动水平或垂直的滚动条时，只需要用手指在鼠标触控板的底边和右边移动即可拖动相应的滚动条。
近段时间使用html5开发一个公司内部应用，而触摸事件必然是移动应用中所必须的，刚开始以为移动设备上或许也会支持鼠标事件，原来是不支持的，好在webkit内核的移动浏览器支持touch事件，并且打包成app也毫无压力。原本以为touch事件应该跟鼠标事件是一样的道理，实践过程中虽然不难，但还是碰到了不少坑，才发现还是略有区别的。
目前，应用的最多的工业机器人，一般都是六轴的，但是最近有人机协作机械臂，却推出了7个自由度？哪不一样了？ 据称，这7个自由度是对人手臂的真实还原。 有人问5，6是不是一样的。5是拧钥匙时唯一要转动的关节，动力来自小臂两根桡骨的扭转；6是把鼠标放在桌面用手转时唯一要转动的关节，动力来自手腕的旋转。 然而为什么人手臂是7个自由度，而不是8个也不是6个？ 首先，6个自由度的机械手，在空间中无法在保持末端机构的三维位置不变的情况下从一个构型变换到另一个构型。 在这张图上，一个机器人的手臂
MotionEvent在android的触摸事件中起到了很重要的作用，本文主要介绍MotionEvent，简要介绍触摸事件，主要包括 单点触控、多点触控、鼠标事件 以及 getAction() 和 getActionMasked() 的区别。
无论你可能会怎么想，目前，在浏览器里可靠地检测当前的设备是否有一个触摸屏是不可能的。
touchstart 当在屏幕上按下手指时触发 touchmove 当在屏幕上移动手指时触发 touchend 当在屏幕上抬起手指时触发 mousedown mousemove mouseup对应的是PC端的事件 touchcancel 当一些更高级别的事件发生的时候（如电话接入或者弹出信息）会取消当前的touch操作，即触发 touchcancel。一般会在touchcancel时暂停游戏、存档等操作。 效果图
ontouchstart、ontouchmove、ontouchend、ontouchcancel
注意点,在html上设置font-size是rem的前提.计算方式.3010=300 3010=300
CSS鼠标样式可以通过设置cursorg属性，从而达到鼠标在对象上移动的鼠标样式。
过去的一年我花费了相当长的时间，研究了下图中市面上形态各异的手机蓝牙遥控器。当然我手里的还只是其中几款，实际上网上在售的还有更多种的样式。
1973年，人类第一次用上了鼠标：施乐帕罗奥多研究中心(Xerox PARC)推出了配备鼠标的Alto电脑。1984年，Macintosh(后简称Mac)也第一次将鼠标作为一种输入方式引入个人计算机。 接下来的这三四十年的时间里，鼠标和键盘几乎统治了人与计算机的交互方式，即便是触摸板，也算是鼠标的变种。 之后，我们又见到了触摸屏幕，再之后，随着个人电子设备的移动化，传统的交互方式更是应时而变。实际上，无论从纯技术还是商业角度看，已经有了不少令人惊喜的、革命性的交互方式不断涌现。 所谓
ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。
Three.js是一个流行的JavaScript库，用于在浏览器中创建和显示3D图形。它基于WebGL，一个浏览器支持的3D图形API，使得开发者能够在网页上创建复杂的3D场景和交互体验。
instantclick.js 是一种ajax无刷新和预加载页面的技术，对于普通博客程序，有着明显的加速作用。(instantclick.js ≈ pjax + 预加载页面)而且，使用方法也十分的简单。在github截止目前，已经由4447个star了，非常可观。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
实时音视频
