一般情况下 CSS 并不会影响 JS 事件，但有一个 CSS 属性则比较特殊，那就是 pointer-events，它可以用来规避鼠标事件，其中大部分属性值只适用于 SVG（可缩放矢量图形）操作，而我们只需要关注其 none 属性值，该值表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。
在前端的移动Web开发中，有一部分事件只在移动端产生，如触摸相关的事件。接下来给大家简单总结一下移动端的事件。
在前端的移动Web开发中，有一部分事件只在移动端产生，如触摸相关的事件。接下来给大家简单总结一下移动端的事件。 1. PC端事件在移动端的兼容问题 1.1 click事件的200~300ms延迟问题 由于移动端默认的布局视口宽度是980像素，所以网页文字非常小，为了快速让网页还原到原来的大小，Safari最新引入了双击缩放功能：用户双击手机页面的时候，浏览器会智能的缩放当前页面到原始大小。 双击缩放的原理就是，当用户click一次之后，浏览器会经过约300ms之后检测是否再有一次click，如果有的话，
Touch.js 是移动设备上的手势识别与事件库, 由百度云Clouda团队维护，也是在百度内部广泛使用的开发工具。 Touch.js手势库专为移动设备设计。 Touch.js对于网页设计师来说，是一款不错的辅助工具，可以减少很多写框架控制器的时间。 网页合理使用Touch.js不但能增加网页的美观感，而且在节约时间，减少人力投入也有极大的帮助。
前端的很多事件在PC端和浏览器端可公用，但有些事件却只在移动端产生，如触摸相关的事件
Zepto.js是一个轻量级的针对现代浏览器的JavaScript库， 它与jquery有着类似的api。 如果你会用jquery，那么你也会用zepto。 1. Why Zepto.js？ API类似jQuery，熟悉jQuery可以无缝迁移到Zepto.js Zepto仅针对高版本现代浏览器设计了最小核心的通用库，代码体积小，尤其适合移动端开发。 Zepto增加了针对移动端的触摸和手势相关的事件 Zepto模块化做的很灵活，可以自定义组合模块 2. Zepto.js下载 代码下载：zeptojs中文站
ionic是一个强大的混合式/hybridHTML5移动开发框架，特点是使用标准的HTML、 CSS和JavaScript，开发跨平台（目前支持：Android、iOS，计划支持：Windows Phone、Firefox OS） 的原生App应用：
有天，辛苦做了个复杂操作功能的页面，上线后有用户反馈：很多功能使用不了。惊了，以为是哪里出了bug。 立马联系用户，才发现原来是用户使用笔记本电脑，没有禁用触控板，然后不小心碰到导致整个界面都放大，很多功能超出界面不见了。 然而那能怎么办，用户第一，自然得快速解决这个问题，而且是触控板和触摸屏都得解决。
本文首发于前端面试总结@知乎专栏，各位可以通过点击文章下方的阅读原来来访问原文地址 问题一览 mouseover和mouseenter两个事件有什么区别？ 移动端的click事件行为与PC端有什么不
本篇为一移动端博文,个人觉得这篇外文还可以,就翻译了一下,最终实现的一个效果是:用手势创建一个本地菜单(点击一菜单按钮,实现设置一个触摸侧滑,滑动滑出效果,如下文中的gif图所示),主要涉及的知识点有移动端三大触摸事件(touchstart,touchmove,touchend),触摸属性,以及实现侧边栏动画,在处理移动端点击,拖动,滑动时,是不得要考虑用户的触摸手势,判断手指在页面上到底是点击还是滑动的,利用原生js的方法封装点击,移动,抬起功能函数,尽管移动(手机)端与pc端有很多相似之处,但还是有很多要注意的地方的,如果你想获得该Demo的源码,复制该标题后台回复[手势魅力-设置一个触摸菜单]就可以了的,初次翻译,如果有误导的地方,欢迎路过的老师,多提意见和指正,如果你想阅读英文原文,扫文末下方二维码或者跳转到指定链接就可以了的
在移动端中，如果我们使用了一个固定定位的遮罩层，且其下方的dom结构的宽度|高度超出屏幕的宽度|高度，那么即使遮罩层弹出后铺满了整个屏幕，其下方的dom结构依然可以滚动，这就是大家所说的“滚动穿透”。
hammer.js是一款移动端手势库组件，支持pan（拖动）、swipe（滑动）、tap（轻触）、press（按压，即长按）、doubletap（双击）等很多手势操作，提供比较完善的事件监听机制，但是
前言 HTML5 将 Web 开发者的战场从传统的 PC 端带到了移动端。然而移动端交互的核心在于手势和滑动，如果只是将 PC 端的点击体验简单地移植到移动端，势必让移动端体验变得了无生趣。以某 AP
首先讲了移动端和电脑端的一些不同，讲到了viewport的概念和相关的虚拟像素、媒体查询，借助媒体查询来实现横屏、竖屏的区别显示。
相信大家搜css touch-action很容易搜到一批文章，但感觉自己还是需要写下自己这这个过程中的一些探索经历。
1：GMU:http://cloudajs.org/ui/brand/gmu GMU是基于zepto的mobile UI组件库，提供webapp、pad端简单易用的UI组件! http://gmu.b
Zepto是一个轻量级的针对现代高级浏览器的 JavaScript库， 它与jquery有着类似的api。
写到最后总结得差不多了，后续如果我想起还有哪些类库工具遗漏的，会继续在这篇文章上补全，同时也希望各位倔友对文章里的要点进行补充或者提出自己的见解。欢迎在下方进行评论或补充喔，喜欢的点个赞或收个藏，保证你在开发时用得上。
前面的话 有一个流传较广的笑话，一个人在stackoverflow中提了一个问题，如何使用javascript实现一个数字与另外一个数字相加。最高票回答是你应该使用jQuery插件，jQuery插件可以做任何事情。 历史总是在重演，以前是jQuery，现在可能是react或vue。不同的框架有不同的应用场景，杀鸡不要用牛刀。本文将详细介绍框架选型 框架与库 库(lib)具有以下三个特点： 1、是针对特定问题的解答，具有专业性； 2、不控制应用的流程 3、被动的被调用 框架(frameword)具有以下三个
iSlider是一个表现出众，无任何插件依赖的手机平台javascript滑动组件。它能够处理任何元素，例如图片或者DOM元素
熟悉掌握HTML、服务器端脚本语言、CSS和JavaScript之后，学习Web框架可以加快Web开发速度，节约时间。PHP程序员可选的框架包括CakePHP、CodeIgniter、Zend等，Python程序员喜欢使用Django和 webpy，Ruby程序员常用RoR。
来源：https://juejin.im/post/5d759f706fb9a06afa32adec
这里直接贴上angular源码地址：angular源码之hammer_gestures <这里方便它更新后的修改> 这里又贴上该地址的源码以便说明：
移动的和PC端有什么不同呢？同样的H5可以运行在APP端，也可以运行在PC端。两者最大的区别就是移动端可以用手势。手势可以做到一些比如左滑右滑，上滑下滑，缩放等操作。
最近项目不是很忙，自己就用原生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
劣势：需加载适配各个终端的各个资源，在不同终端通过响应式布局实现不同展现，部分交互效果需要在页面中做终端判断，代价较大，若图片资源为一套，部分图片在超高分辨率设备（例如iphone系列）下会失真，且在非wifi情况下即使加了延时加载也易出现加载慢的情况。
从本篇文章开始要写一个新的可视化库的系列文章：Highcharts。对这个库来自官网的赞美：
https://juejin.im/post/5d759f706fb9a06afa32adec
相信很多招聘要求上都会写明需要3-5年经验才可以达到架构师要求，并且针对其中一些必要的技术储备大家已经能够耳熟能详，那究竟为什么需要这么久时间，以及具体每项技能需要掌握到什么程度才可以担当这个角色呢？
一个网页由三层组成（html 结构，js 行为，css 表现），一切的东西其实都建立在html上，html里面的dom提供了一些事件，然后通过js封装，我们可以用js去调用dom上的事件。事件有很多，有我用过的有我没用过的，今天我想分析一番。
来源: 铁皮饭盒https://juejin.im/post/5d89cd156fb9a06acb3ee19e
当我们设计师输出了精美的设计稿，然后附带了一个流畅的手势动画，交付给开发的时候，也期待着开发大佬搞出和自己预期一样体验流畅。但是等到实际体验的时候，却发现有一种说不出的闹心。 “这个感觉不好按...” “划起来咋这么费劲呢？” “怎么感觉动画怪怪的。” Chapter 1 我们与流畅的距离 当你正准备和开发一通友好探讨的时候，这个时候开发向你发起了一系列灵魂拷问： “你这个左滑的手势，划多少才算触发？划多快才算触发？如果划了一半划回去算不算触发？如果我先点击后滑动算不算触发？松手之后的动画是多快的速度
前言 手势操作是Android交互当中至关重要的. 可以说, 如果一个软件没有好的手势操作, 就不能将其定义为移动端的软件. 这里来看下谷歌提供的GestureDetector类. 搭配属性动画使用, 效果更好哦. ---- 初步了解手势操作 先来一段可以快速了解手势操作类的代码. 这里用到了GestureDetector.SimpleOnGestureListener(), 可以暂时理解为是一个适配器, 快速实现GestureDetector.OnGestureListener接口中要实现的方法.
这个功能对于浮层来说是很必要的，如下所示，是微信的 Windows 客户端。点击头像时会弹出一个浮层展示信息，当点击其他位置时，浮层会消失 并且点击的位置可以响应点击事件 。
首先很遗憾的一点是，“PHP虽然是最好的语言”，但是它不是最流行的语言。 对不起的还有刚刚在4月TIOBE编程语言排行榜上榜的各个语言： 你们都很棒，但是你们都担当不了这个大任。 开始之前，我先说一
在 iOS Safari （其他浏览器和 Android 均不会）上会对那些看起来像是电话号码的数字处理为电话链接，比如：
1.关于echarts各种稀奇古怪让人想骂niang地需求的配置 2.vue中，mode为history时，build打包后页面空白的解决方法 3.vue中使用axios，实现向请求头中传递cookie值 4.js-sdk微信分享时，动态url的设置 5.vuex的使用步骤梳理，轻松掌握。 6.一个基于promise的ajax异步请求函数封装，不用再写那么多遍的if result === 1啦！ 7.使用vue实现自定义多选与单选的答题功能 8.基于ajax渲染模板的二级/多级自定义联动下拉功能封装， 9.
关于echarts各种稀奇古怪让人想骂niang地需求的配置 js-sdk微信分享时，动态url的设置 基于ajax渲染模板的二级/多级自定义联动下拉功能封装， 一个基于promise的ajax异步请求函数封装，不用再写那么多遍的if result === 1啦！ css-移动端h5在iphonex的适配 vuex的使用步骤梳理，轻松掌握。附源码 使用vue实现自定义多选与单选的答题功能 vue中使用axios，实现向请求头中传递cookie值 vue中，mode为history时，build打包后页面空白
ECharts开源来自百度商业前端数据可视化团队，基于html5 Canvas，是一个纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。
小程序一直以来采用的都是 AppService 和 WebView 的双线程模型，基于 WebView 和原生控件混合渲染的方式，小程序优化扩展了 Web 的基础能力，保证了在移动端上有良好的性能和用户体验。Web 技术至今已有 30 多年历史，作为一款强大的渲染引擎，它有着良好的兼容性和丰富的特性。 尽管各大厂商在不断优化 Web 性能，但由于其繁重的历史包袱和复杂的渲染流程，使得 Web 在移动端的表现与原生应用仍有一定差距。
测试时，遇到过Web端的项目，也测试过App,对于两者的区别以及一些侧重点，结合网络和自己的实战经验总结记录下来，方便以后测试查看。
目前AlloyFinger作为腾讯手机QQ web手势解决方案，在各大项目中都发挥着作用。
那么问题来了，为什么会有一个默认的viewport呢？我们知道，pc端页面，在移动端查看的时候，由于像素不匹配，但是为了能够给用户展现一个比较完整的页面，因此会虚拟出一个viewport出来，在此viewprot上渲染页面。也就是说，最终目的，是为了排版正确。但是由于一般默认情况下，给出的viewport像素宽对页面来说是不友好、不规范的，因此我们还需要解决一个规范问题。解决方案：在head中加一个meta标签格式如下：<metaname="viewport"content="name=value, name=value">
本文将用一个极简的例子详细讲解如何用原生JS一步步实现完整的图片预览和查看功能，无任何第三方依赖，兼容PC与H5，实现了触屏双指缩放等，干货满满。
原文：4 Lessons Learned From 4 Years Of Non-Stop Data Analysis
移动互联网发展十余年，伴随着 Android、iOS 等智能手机的不断普及，移动端已逐步取代 PC 端，成为兵家必争之地。正所谓“得移动端者得天下”，移动端已成为互联网领域最大的流量分发入口，一大批互联网公司正是在这大趋势下崛起。
在移动端 WEB 开发的时候（小程序也雷同），如上录屏所示，如果页面超过一屏高度出现滚动条时，在 fixed 定位的弹窗遮罩层上进行滑动，它下面的内容也会跟着一起滚动，看起来好像事件穿透到下面的DOM元素上一样，我们姑且称之为滚动穿透。
objc和js这两者有个有意思的对比：变量/方法命名的风格正好相反。苹果一直鼓吹用户体验，写代码也不例外，程序命名都是用英文全称并且要多详细有多详细，力求看变量和方法名就能知道是干嘛的，例如application:didFinishLaunchingWithOptions:。而js因为每次都要从网络下载，要力求减少代码体积，所以变量方法名是尽量用缩写，实际上有代码压缩工具，无论变量名写多长最终上线的效果是一样的，但大家也都习惯了用短的命名，例如上述objc的application:didFinishLaunchingWithOptions:方法在js里习惯的命名是:$()。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
实时音视频
