从移动端 click 到摇一摇

最新推荐文章于 2023-02-14 11:45:34 发布
最新推荐文章于 2023-02-14 11:45:34 发布
阅读量498 收藏
点赞数 1
分类专栏： JS HTML5 文章标签： click
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/feifanzhuli/article/details/77991483
版权
JS 同时被 2 个专栏收录
36 篇文章 0 订阅 ¥39.90 ¥99.00
订阅专栏 超级会员免费看
HTML5
11 篇文章 0 订阅
订阅专栏
本文探讨了移动端click延迟的原因，介绍了通过设置viewport元标签和CSS方法消除300ms延迟，以及实现tap事件的方法。同时，讲解了HTML5的devicemotion事件用于检测手机重力感应，实现摇一摇功能的原理和代码实现，提供了优化阈值以调整触发灵敏度的建议。
摘要由CSDN通过智能技术生成

以前听到前辈们说移动端尽量不要使用click，click会比较迟钝，能用touchstart还是用touchstart。但是用touchstart会有一个问题，用户在滑动页面的时候要是不小心碰到了相关元素也会触发touchstart，所以两者都有缺点。那怎么办呢？

首先为什么移动端的click会迟钝呢？从谷歌的开发者文档《300ms tap delay, gone away》可以找到答案：
因为移动端要判断是否是双击，所以单击之后不能够立刻触发click，要等300ms，直到确认不是双击了才触发click。所以就导致了click有延迟。

更为重要的是，文档里面还提到在2014年的Chrome 32版本已经把这个延迟去掉了，如果有一个meta标签：

<meta name="viewport" content="width=device-width">

了解本专栏 订阅专栏 解锁全文 超级会员免费看
爱睡的虫虫
关注
专栏目录
订阅专栏
JS移动端浏览器取消右划后退的几种方法
爱睡的虫虫
09-09 1万+
在开发过程中，发现我们公司所使用的APP有点BUG，在APP中打开网页、H5应用之后，处于首页时，轻微的右划触发了后退事件，导致直接退出网页或者H5应用的页面，这样使得很多需要交互的手势没办法使用。本来这个右划后退事件是不应该出现在第一页的，这个BUG也应该由APP得开发来解决，不过当时这个APP是外包做的，如果更改这些比较麻烦，因此解决问题的任务就由我来了。　　在使用某些JS插件（fullpage
金额输入框正则表达式，金额校验
爱睡的虫虫
12-13 9851
金额输入框： &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta charset=&amp;quot;UTF-8&amp;quot;&amp;amp;gt; &amp;amp;lt;script&
移动端之摇一摇
weixin_30263073的博客
03-28 102
移动端之摇一摇 一、移动端重力感应事件 window.devicemotion事件在一个固定的间隔（极快的时间间隔）内被触发，并指定了设备在那个时候接收到的加速度的物理力的大小 在devicemotion事件回调函数的event参数中，有个属性可以来获取设备的运动传感器的加速度数据， event.accelerationIncludingGravity返回一个DeviceAcceleratio...
js 侦听手机摇动事件，模仿微信摇一摇功能
第7维度 - 日常笔记
07-04 2323
?12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576//监听手机摇动事件if (window.DeviceMotionEvent) {    window.addEv
基于Unity3D的移动端摇一摇功能的实现
BackkomCoder的博客
11-12 2371
手机摇一摇功能在平时项目开发中是很常见的需求，利用Unity的重力感应可以很方便的实现该功能。
微信摇一摇插件ios_解决ios无法触发摇一摇兼容，Cordova实现模仿微信摇一摇
weixin_39657575的博客
12-19 226
document.addEventListener("deviceready", onDeviceready);var pic = new Array('car.png', 'house.png', 'money.png');var name = new Array("车房钱");var all_roll = 0;var u_roll = 0;function onDeviceready() {c...
玩转Android之加速度传感器的使用，模仿微信摇一摇
weixin_30348519的博客
05-07 265
Android系统带的传感器有很多种，最常见的莫过于微信的摇一摇了，那么今天我们就来看看Anroid中传感器的使用，做一个类似于微信摇一摇的效果。OK ,废话不多说，我们就先来看看效果图吧：当我摇动手机的时候这里的动画效果基本和微信上的动画效果一致，这里请大家自行脑补微信摇一摇画面。那我们就动手吧。1.布局文件好，那我们先来看看布局文件吧，在布局文件的正中央是一个花的图片，上图大家看到的手机图...
从移动端click到摇一摇
xiao_shutong的博客
07-25 471
正文从这开始～ 以前听到前辈们说移动端尽量不要使用click，click会比较迟钝，能用touchstart还是用touchstart。但是用touchstart会有一个问题，用户在滑动页面的时候要是不小心碰到了相关元素也会触发touchstart，所以两者都有缺点。那怎么办呢？ 首先为什么移动端的click会迟钝呢？从谷歌的开发者文档《300ms tap delay, gone aw
移动click消除300毫秒及摇一摇
u011649976的博客
07-25 1576
从移动端 click 到摇一摇 以前听到前辈们说移动端尽量不要使用click，click会比较迟钝，能用touchstart还是用touchstart。但是用touchstart会有一个问题，用户在滑动页面的时候要是不小心碰到了相关元素也会触发touchstart，所以两者都有缺点。那怎么办呢？ 首先为什么移动端的click会迟钝呢？从谷歌的开发者文档《300ms tap de
微信摇一摇js
xyphf的博客
07-29 784
Pandora.Grav.Mobile.js(function($) { $.fn.extend({ //移动端-重力感应 Grav: function(options) { var config = { ShakeRate: 200, //重力灵敏度
JavaScript实现“摇一摇”功能Cordova移动应用开发
weixin_44228861的博客
04-03 520
如何实现“摇一摇” 摇一摇需要添加cordova插件：cordova plugin add cordova-plugin-device-motion,获取设备的加速度来实现手机摇动幅度的计算。 框架选择为比较流行的JQuery Mobile 一、html代码 代码为： <div data-role="content"> //创建一个容器 <di...
（八）移动端前端开发-移动端事件
m0_56517198的博客
02-14 729
鼠标类：click、mouseover、mouseout、mouseleave、mouseenter、mouseup、mousedown…键盘类：keydown、keyup…其他类：blur、focus、change、load…移动端事件：点击事件\双击事件、滑动事件：上滑、下滑、左滑、右滑、长按事件、摇一摇、重力感应等。。在移动端上使用click事件，会出现300ms延时问题。判断用户操作是否为双击事件，在300ms以内再一次点击了屏幕，浏览器则判断为双击操作。没有点击则为单击操作。touch事件
移动端基础事件总结与应用
08-31
- 实现摇一摇功能： ```javascript var box = document.getElementById('box'); var lastRange = 0; var isShake = false; function shakeEvent(ev) { var currentRange = Math.abs(lastRange - ev....
移动端实现点击按钮复制文本功能
摇摆小仙的博客
07-11 2521
最近处理了一个点击复制按钮,复制文本的功能, 百度了一通,有用clipboard这个插件的, 有用css的, 有用dom的select方法的. 这里我选择了dom的select方法. 参考链接: 前端vue.js实现点击复制功能（完美解决移动端可用） 介绍一下, select() 方法用于选取文本域中的内容, 我的理解就是用于input的type为text的情况, 或者说是textarea. 因为我的需求是展示一个优惠码, 如果用Input来做展示的话, input的宽度是固定的,没法随着内容来自适应宽度.
JS原生脱敏
爱睡的虫虫
09-26 5650
substring(str){ if(typeof str == 'string'){ //参数为字符串类型 let ruten = str.substring(3,8); //提取字符串下标之间的字符。 return str.replace(ruten,'*****'); //字符串中用字符替换另外字符，或替换一个与正则表达式匹配的子串。 } }效果展示
判断对象中是否存在某个对象和属性
爱睡的虫虫
05-09 4925
描述：判断一个输入框中的值是在一个对象中的解决办法 var obj = {'name':'孙悟空','age':10,'address':'水帘洞'};//定义对象 //联想功能校验 var continueFor = 0; for(var item in obj ){ //判断对象中 if(this.gangedCard == this.obj[item].cod...
实现页面的多个倒计时效果
爱睡的虫虫
05-23 3954
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;Jquery实现页面的多个倒计时&lt;/title&gt; &lt;/head&gt
H5页面字体大小使用rem （重置字体大小）setFontSize.js
爱睡的虫虫
01-16 3773
注意： html字体大小要先设置成100px，并且JS在CSS重置为100px以后引入。 //初始化rem (function(){ var getStyle = (function(){ if(window.currentStyle){ return function(obj, name){ retur
json
爱睡的虫虫
06-20 2258
什么是 JSON ？ JSON : JavaScript Object Notation (JavaScript 对象表示法) JSON : 是轻量级的文本数据交换格式 JSON : 独立于语言，支持不同编程语言（PHP，JSP，.NET） JSON 语法规则 JSON 语法是 JavaScript 对象表示语法的子集。 数据在名称/值对中 数据由逗号分隔 大括号保存对象 中括号保存数组 JS...
手机摇一摇抽奖代码实现
最新发布
06-13
下面是一个简单的手机摇一摇抽奖代码实现示例： HTML部分： ```html <!-- 抽奖按钮 --> 摇一摇抽奖 <!-- 中奖提示 --> <div id="result"></div> ``` JavaScript部分： ```javascript // 监听DeviceMotion事件 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值