html5 自动点击事件,HTML5 自定义点击事件

这段代码实现了一个HTML5的TAP事件,适用于IOS和PC端,适用于Android但需每次重新创建。它通过监听touchstart和touchend事件来判断用户的点击行为,过滤掉快速滑动,确保只有静止的点击会触发自定义的TAP事件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

HTML5 自定义点击事件

/*封装的TAP事件*/(function() {/**

* IOS 和 PC 端 只需要创建一次就能一直使用

* Android 手机 每次使用的时候都需要从新创建*/

functioncreateEvent() {var

myEvent = document.createEvent("htmlEvents");

myEvent.initEvent(

"tap",true

,true);returnmyEvent;

}var

oldTime =null

, newTime =null;varstartx, starty, endx, endy;

document.addEventListener(

"touchstart",function(ev) {

ev

= ev ||event;

oldTime

=newDate().getTime();

startx

= ev.changedTouches[0].clientX;

starty

= ev.changedTouches[0].clientY;

});

document.addEventListener(

"touchend",function(ev) {

ev

= ev ||event;

newTime

=newDate().getTime();

endx

= ev.changedTouches[0].clientX;

endy

= ev.changedTouches[0].clientY;if

(newTime - oldTime > 300)return;if

(Math.abs(startx - endx) > 10 || (Math.abs(starty - endy)) > 10)return;

ev.target.dispatchEvent(createEvent());

});

})();

来源: http://www.bubuko.com/infodetail-2294790.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值