Zepto tap事件中需要触发两次的问题

BCIC IV 2a数据集实战:从MATLAB导入到EEG信号分析全流程 本文提供了BCIC IV 2a数据集从MATLAB导入到EEG信号分析的完整实战流程。详细解析了数据集结构,区分了EEG与EOG信号,并演示了信号可视化、基础预处理(滤波、分段、基线校正)等关键步骤,帮助脑机接口研究者快速上手处理这一经典运动想象数据集。 阅读详情

最近在使用zepto.js的时候,发现其tap事件的一个BUG,被产品和测试同学反复找了几次之后,终于下定决定去研究zepto的源码,并解决了问题。

BUG情况说明:

给页面<a>标签绑定了tap事件,在移动设备上点击按钮貌似一切正常,可以正常响应。
但是,把页面上下滑动几次之后,或者在滑动时手指滑动出移动屏幕之外,之后再点击按钮,就会发现第一次点击的时候事件没被触发,需要点击第二次才会正常,而且几乎是必现的。一开始的时候我还以为是安卓Webview要获取页面焦点的原因,后来研究了下zepto源码之后,发现原来不是。

Tap事件实现原理:

其实不用看代码都猜的出来,是用touchstart touchmove touchend这三个事件去实现的,没错,就是这样。

但是为了区分“点击”和“拖动”两个动作,zepto是用了deltaX和deltaY两个变量去分别记录手指在触碰到屏幕时到离开屏幕时的x轴和y轴距离,如果deltaX>30px或者deltaY>30px,则认为是“拖动”动作,就不会触发tap事件了。

一切看似正常,但是细看一下,原来deltaX和deltaY的置0的是在touchend里实现的,而移动设备上,有两种情况是有可能导致touchend事件没触发(1.快速划动屏幕多次,2.划动屏幕时手指划出屏幕边界),这样deltaX和deltaY就不会被置0了,等到下次再点击的时候,deltaX和deltaY就有可能大于30px,导致tap事件不被触发。

问题解决:

想必大家都知道该怎么解决,没错,就是在touchstart时添加deltaX和deltaY的置0,代码如下:

.on('touchstart MSPointerDown pointerdown', function(e){  
    deltaX = deltaY = 0;  
    ...... 

修改位置:zepto里或者touch.js里修改。

基于FMCW技术的毫米波雷达测速原理与应用 调频连续波(FMCW)技术是毫米波雷达中实现高精度测速的核心方法之一。本文详细介绍了FMCW测速的基本原理、信号处理流程以及在实际应用中的关键技术。通过分析FMCW雷达的多普勒效应和频率差测量方法,本文展示了如何利用FMCW技术实现目标速度的高精度检测。此外,本文还探讨了FMCW测速在自动驾驶、智能交通和工业自动化等领域的应用案例,为毫米波雷达开发者提供了理论支持和实践指导。 阅读详情

相关推荐

边缘AI硬件风向:从专用芯片到端侧大模型

边缘AI硬件正呈现五大发展趋势:专用AI加速芯片(如华为昇腾、谷歌EdgeTPU)凭借高能效比成为主流;端侧大模型催生支持Transformer架构的新硬件需求;存算一体技术突破内存墙限制;FPGA和可重构计算提供灵活性;异构集成与Chiplet技术实现模块化设计。这些发展需要配套软件工具链支持,未来边缘设备将演变成具备本地智能的"智能体",竞争焦点转向算力、能效、易用性和成本的多维平衡。

qq_37027335的博客 348

zepto.js tap 会执行两次的bug以及 Uncaught TypeError

发现zepto.js 的tap事件,点击一次会执行两次,于是搜了一下,发现很多人都提了这个问题了。 原因就是谷歌升级为55版本之后,最新版Chrome绑定了三个事件touchend MSPointerUp pointerup,touchend是触摸相关的事件,MSPointerUp 是ie10的触摸事件,pointerup是指针事件。 可能是以前的chrome不支持pointerup事件,

chanming的博客 1623

4、设备树的处理(1)

其实到第4节才写设备树的问题完全是因为忘记了,之前有一个版本是先关闭了设备树的,习惯性的认为设备树已经处理完了,失误了!!!前文说过,这个系统是依着荣品的开发板和核心板来的,使用的是5.1内核的SDK。它的SDK里是开发板全功能的,所以设备树也是的。

wsen2012的博客 417

Zepto

一、Zepto初体验 1.1 什么是Zepto? Zepto 是一个轻量级的针对现代高级浏览器的 JavaScript库, 它与jQuery有着类似的api, 如果你会用jQuery,那么你也会用Zepto 1.2 .既然和jQuery差不多, 为什么还需要Zepto? jQuery更多是在PC端被应用,Zepto更多是在移动端被应用 也正是因为jQuery用在PC端, 所以jQuery考虑了很多低级浏览器的的兼容性问题, ,所以代码更多体积更大 也正是因为Zepto用在移动端, 所以

小白小白从不日别的博客 4414

AI对嵌入式的冲击分三波,大多数人只看到了第一波

摘要:AI对嵌入式行业的冲击将分三波递进:第一波(已发生)是代码生成,AI能完成底层驱动配置;第二波(1-2年内)是架构设计,AI将参与系统方案制定;第三波(2-3年)是需求验证,AI能穷举测试用例但无法替代安全决策。每波冲击都将重新定义工程师的价值标准,经验型工程师若不能将隐性知识转化为显性规则将面临淘汰。作者指出,完全不用AI的人第一波就会被淘汰,而仅满足于第一波应用的人将在后续冲击中落后。

u010898524的博客 962

山东大学FPGA课程实验一 加法器设计

电子设计自动化与FPGA设计,实验一 加法器设计

2503_91283667的博客 869

【Zepto笔记】Zepto.js

Zepto.jsZepto 简介jQuery 与 Zepto 的区别关于浏览器兼容既然有了JQuery,为什么要Zepto呢Zepto 设计模块Zepto 案例选择器案例动画案例动画案例2验证Zepto特效基于CSS3Zepto 针对移动端的模块tap() 和 click() 的区别swipe() Zepto 简介 随着移动端的愈加火爆,目前很多 HTML5 的框架都在支持移动方向,比如:Vue....

萌宅鹿的技术小屋 1757

Oracle集群管理-19.3升级19.18 opatchauto总结(java报错,resume oneoffs缺失目录)

t. (那个认为补丁已经打上了,但是oneoffs目录里面没有。将安装包文件的权限全部改成777.就继续执行了上述命令 ,此时使用opatch lsinv也是报错 ,在正常执行opatchauto apply。1 创建目录,存放补丁包,并赋予权限。于是使用如下命令对补丁进行回滚。

oradbm的博客 1415

(九)移动端前端开发-Zepto框架

Zepto的一些的可选功能专门针对移动浏览器,因为最初的目标是专门为移动网站提供一个精简的jQuery替代方案。//需求:点击div元素,给div元素添加animate动画(需要包含transform属性里面的方法)。使用jQuery时load事件的处理函数不会执行,使用Zepto时load事件的处理函数会执行。//tap事件类似PC端上的click事件,它表示手指触摸某个元素会被出发。//选中页面中所有id为foo元素,将其背景设为粉色。//选中页面中所有的div元素,将其背景设为红色。

m0_56517198的博客 866

哨兵1号回波数据(L0级)包格式解析与成像参数提取

提取哨兵1号数据包的辅助数据、回波数据、定标数据。matlab代码在文末

3130

Arduino与Proteus仿真实例-HG7881(L9110)驱动直流电机仿真

HG7881(L9110)驱动直流电机仿真 HG7881 (L9110) 双通道电机驱动器模块。 HG7881 (L9110) 是一款紧凑型电机驱动芯片,支持 2.5-12V 电压范围,800mA 连续电流。 这些芯片具有内置输出钳位二极管以保护敏感的微控制器电子设备。 它们适用于非常小的机器人项目。 每个 HG7881 (L9110) 芯片都能够使用两个数字控制输入驱动单个直流电机。 一个输入用于选择电机方向,而另一个用于控制电机速度。 速度是通过使用 PWM 脉冲宽度调制来控制的。 电机驱动器通常具有

视觉与物联智能 3051

Zepto:轻量级的JavaScript库

本文将介绍Zepto库的概念、作用及其在实际项目中的应用,帮助读者更好地理解Zepto的重要性,提高前端开发的效率。Zepto是一个轻量级的JavaScript库,它提供了一系列简洁的API,用于简化DOM操作、事件处理和动画效果等。轻量级:Zepto库体积较小,易于加载和运行。兼容性:Zepto支持多种浏览器,包括旧版浏览器。简洁的语法:Zepto使用链式语法和选择器,使得代码更加简洁和易于阅读。

你若盛开,清风自来 1510

YOLOv12改进前必看 - YAML模型配置文件详细解读(再也不用担心通道数不匹配) 附网络结构图

YOLOv12的模型配置文件在中,里面包含yolov12的以及的不同大小的模型,本文将详细介绍一下YOLOv12模型文件中各参数的含义。

Limiiiing的博客 3278

zepto tap事件触发两次

关于zepto.js中tap事件会触发两次问题-唯品秀前端博客 移动端:解决zepto中tap事件触发两次_格桑Hilton小黑屋-优快云博客 https://segmentfault.com/q/1010000005813082

qq_43654065的博客 234

老版QQ原生表情gif动态

这是老版的QQ表情,不过全是动态的的,Windows照片查看器是不会动的,可以右击用浏览器打开查看,再说一遍是老版的,只是分享给宁愿用老版也要动态的人。

ssm框架搭建

这个是一个在idea上成功跑起来的ssm框架项目,保存在这里方便以后使用直接下载

chrome 55 zepto tap事件出错?

刚才升级chrome后发现的,在54.0.2840.98上点击没有问题,在新升级的55.0.2883.75 上点击后会报错Cannot read property 'trigger' of undefined 解决方法 就是修改谷歌浏览器对指针活动的支持。。 1、谷歌浏览器输入 chrome://flags/ 回车 2、找到 指针活动 那一项 3、选择 已停...

dingcheng9127的博客 218

最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版

Part-E1-SDIO-Specification-Ver4.00-Final-120220.pdf:最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版,包括SDIO 接口的外设,SDIO 接口官方协议等。

最近一段时间在使用zepto.js的tap事件的时候,出现执行两次的bug,并报错

就是在引用zepto的时候,写点击事件的时候会报如下错误: Cannot read property 'trigger' of undefined 错误的来源谷歌显示是在touch.js的错误; 后来在segmentfault找到的原因,是因为最近浏览器更新出现个一个不兼容的问题,即: 出现的原因:点击tap事件直接进入两次, 执行touchend和pointerup分别一次。

kerwener的博客 733

精雕软件(JDpaint) 5.5 绿色版

精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版

Uncaught TypeError: Cannot read property 'trigger' of undefined(zepto.js)

去掉pointermove pointerdown pointerstart 原因: 点击tap,touchstart和pointerstart都执行了,tap里面代码执行了两次,仔细看了下,首先点击后触发了两次,说明被绑定了两次事件,然后查看下zepto的touch.js代码,发现它绑定了三个事件touchend MSPointerUp pointerup,touchend是触摸相关的事件,...

ijijni的博客 6984

MUI踩过的一些坑

1使用了下拉刷新后     这里面的内容,所有的a标签都的href都无法正常跳转,div,span,a ,i  等等这些标签里面的onlick 事件和 click 都无法执行。只有在button上面绑定click事件是可以执行的,或者绑定mui的tap事件。 mui.ready(function() { mui(document).on('tap','#call',function(){

不知不觉 | 笔记 1万+

Zepto tap事件“穿透”、“点透”问题研究

首先,什么是zepto tap事件穿透? tap事件穿透就是,有多个层级上有绑定事件,最上层的绑定了tap事件,下层绑定了click事件,在执行完上层事件后会触发下层事件,进而出现事件穿透。如果下层是input标签,必穿透。 究其原因: 是因为zepto实现tap事件是冒泡到document上时才触发的,也就是tap事件是绑定在document上,而click事件有延时触发。

angeljsl的专栏 7493

移动端:解决zepto中tap事件触发两次

移动端的小伙伴应该都深知click延迟300s的坑,作为一个不求甚解的垃圾前端我一直是用fastclick.js来解决的。 有天一时兴起用了mui的框架,使用了mui的上拉加载,生成的列表竟然触发不了click事件(ps:click事件不触发问题至今悬而未决,如有高招,跪求!),代码如下: $('.father').on('click','.item',function(){ //点击选中 ...

格桑Hilton小黑屋 2023

zepto的tap事件的穿透分析

首先是什么情况下会发生zepto(tap)的事件穿透: 当一个弹出层用tap点击之后这个层隐藏或者是移走,都会触发下面对应位置的点击事件(click)和一些标签的默认行为(a标签的跳转、input获取焦点)。 原因:   zepto的tap通过兼听绑定在document上的touch事件来完成tap事件的模拟的,及tap事件是冒泡到document上触发的,再点击完成时的tap事件...

127

zepto的tap事件的点透问题的几种解决方案

zepto的tap事件的点透问题的几种解决方案 zepto的tap事件点透问题分析: 1、“点透”是什么 你可能碰到过在列表页面上创建一个弹出层,弹出层有个关闭的按钮,你点了这个按钮关闭弹出层后后,这个按钮正下方的内容也会执行点击事件(或打开链接)。这个被定义为这是一个“点透”现象。 在前面的项目中遇到了如下图的问题:在点击弹出来的选择组件的右上角完成后会让完成后面...

andywang821017的博客 137

zepto.js中tap事件的阻止冒泡方法

tap 事件并非原生 JavaScript,所以 e.stopPropagation() 方法并不管用,可以采用下面的方法实现阻止冒泡的效果。 在父元素的 tap 事件中加入判断条件 e.target === this ,满足条件再执行相关的操作,案例如下,原理后面说。 <ul> <li></li> </ul> $("ul").on("...

量子蔷薇的博客 959

tap 和click 事件区别

之前考三七互娱时遇到的问题,今天回顾记录下。 首先说下题目:clike事件和 Zepto.js 中tap的区别  首先介绍下Zepto: 最初是作为移动端开发的库,但是却可以作为JQuery轻量级的替代品,因为API和JQuery相似,而文件更小。 介绍下tap和click的区别: 两者都会在点击时触发,但是在web手机端,clikc会有200-300ms的延时,所以要用tap代替cli

此博客停止维护和更新,已转移https://github.com/ilvseyinfu/blog 2万+

fastclick与zepto的 tap事件关于在手机上click事件的300ms延迟的区别

之前翻译过一篇关于fastclick的快速点击文章http://www.cnblogs.com/lilyimage/p/3568773.html,fastclick可以解决在手机上点击事件的300ms延迟;另外我们也知道zepto的touch模块,帮助我们实现了很多手机上的事件,比如tap等,tap事件也是为了解决在click的延迟问题。那么他们有什么区别呢? 先看zepto的touc...

dasuo1170的博客 203

手机web开发,click,touch,tap事件浅析

一、click 和 tap 比较 两者都会在点击时触发,但是在手机WEB端,click会有 200~300 ms,所以请用tap代替click作为点击事件。 singleTap和doubleTap 分别代表单次点击和双次点击。 二、关于tap的点透处理 在使用zepto框架的tap来移动设备浏览器内的点击事件,来规避click事件的延迟响应时,有可能出现点透的情况,即点击会触发非当前层的点

fengwizard的专栏 5万+
上一篇: Mac终端命令行执行Python脚本文件
下一篇: 前端web app之rem的介绍
刘五分
博客等级 码龄10年 15粉丝 11原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值