移动端事件绑定
admin
2023-08-15 18:35:26
0

最近做一个移动端项目,引入了fastclick,发现不少问题,翻阅了mdn和w3c,记录一下吧
addEventListener 原型
target.addEventListener(type, listener, options); target.addEventListener(type, listener ,{capture: Boolean, passive: Boolean, once: Boolean}); target.addEventListener(type, listener, useCapture); target.addEventListener(type, listener[, useCapture, wantsUntrusted]);

前面两个参数,不需要说明,新支持了options对象
options:
  • capture: Boolean,表示 listener 会在该类型的事件捕获阶段传播到该 EventTarget 时触发。
  • once: Boolean,表示 listener 在添加之后最多只调用一次。如果是 true, listener 会在其被调用之后自动移除。
  • passive: Boolean,表示 listener 永远不会调用 preventDefault()。如果 listener 仍然调用了这个函数,客户端将会忽略它并抛出一个控制台警告。
  • mozSystemGroup: 只能在 XBL 或者是 Firefox' chrome 使用,这是个 Boolean,表示 listener被添加到 system group。
新增加的options属性,支持了 passive 和 once 属性
div.addEventListener('click', function(){},{once: true}) // 事件只会执行一次

div.addEventListener('click', function(){}, {passive: true}) // 浏览器默认不会执行event.preventDefault()

判断是否支持
var passiveSupported = false; try { var options = Object.defineProperty({}, "passive", { get: function() { passiveSupported = true; } }); window.addEventListener("test", null, options); } catch(err) {}

可以判断事件绑定是否支持passive特性
fastClick 使用中遇到的表单的坑 fastclick是拦截用户的touchStart touchMove 和touchEnd 事件,看用户操作耗时来组织掉后面的click事件,去程序触发 click事件,从而解决移动端的300ms延时
【移动端事件绑定】但是在以前移动端默认不支持passive,从谷歌提供pwa,在ios11.3以后,由于默认不会执行event.preventDefault(), 所以需要手动修正这个bug

相关内容

热门资讯

a... 本文目录导航: abaqus振动照应剖析中处罚力的加载方法 abaqus反...
a... 本文目录导航: abaqus资料可以不设置参数吗 abaqus外面没有自带...
A... 本文目录导航: ANSYS Workbench中二维平面剖析的设置。 an...
h... 本文目录导航: hfss19.2允许win11吗 微带如何假负载 ...
a... 本文目录导航: ansys模流剖析用哪个模块 Ansys_workbenc...
v... 本文目录导航: 在ansys中,建好几何模型后,随意变动一下视图,旋转、加大、增加,Fit...
A... 本文目录导航: Ansys软件可以收费试用吗? ansys有哪些软件 ...
a... 本文目录导航: abaqus中如何同时关上两个cae文件? abaqus找...
a... 本文目录导航: ansys流体剖析迭代次数可以中止嘛 Ansys Flot...
这... 本文目录导航: 哪位大佬有 Fluent14.5流场剖析从入门到知晓,这种百度网盘资源的链...
经... 双击D2进入System Coupling的设置,在Solution上右击选用Clear Gener...
a... 本文目录导航: ansys软件引见 ansys有哪些软件 ...
a... 本文目录导航: abaqus系列技巧18:聊聊abaqus云图外面的魔术加大镜--缩放倍数...
a... 本文目录导航: abaqus中网格不可绘制 abaqus结果可视化某个部件...
a... 本文目录导航: abaqus结果可视化某个部件云图只显示网格接壤处的? a...
驳... 本文目录导航: ABAQUS中假设选择施加的载荷类型为pressure,对应的载荷单位应该...
a... 本文目录导航: abaqus2020旋转不了物体 怎样判别abaqus转的...
在... 本文目录导航: 在abaqus中如何删除一个单元 ABAQUS怎样删除网格...
它... 本文目录导航: abaqus为什么叫abaqus,它是那些词的简称么?全称是什么呢? ...
披着“现货订购”外衣的非法期货...   近期,甘肃西北商品交易市场有限公司旗下的“铂银掘金APP”引发大量投资者集中维权。该平台打着“低...