H5 --(封装)移动端原生长按事件

1、需求:封装移动端长按事件
2、分析:JavaScript原生并不存在长按事件,所以我们需要通过touchstart 、touchmove 、touchend来模拟并封装一个长按事件
3、上代码*(函数名为:longpress,参数为:需长按元素的id、长按之后的逻辑函数 func)*
// 函数名longpress,参数为: 需长按元素的id、长按之后的逻辑函数func
function longpress(id, func) {

	var timeOutEvent;
	
	document.querySelector('#' + id).addEventListener('touchstart', function (e) {
		// 开启定时器前先清除定时器,防止重复触发
		clearTimeout(timeOutEvent);
		// 开启延时定时器
		timeOutEvent = setTimeout(function () {
			// 调用长按之后的逻辑函数func
			func();
		}, 300);  // 长按时间为300ms,可以自己设置
	});
	
	document.querySelector('#' + id).addEventListener('touchmove', function (e) {
		// 长按过程中,手指是不能移动的,若移动则清除定时器,中断长按逻辑
		clearTimeout(timeOutEvent);
		/* e.preventDefault() --> 若阻止默认事件,则在长按元素上滑动时,页面是不滚动的,按需求设置吧 */
	});
	
	document.querySelector('#' + id).addEventListener('touchend', function (e) {
		// 若手指离开屏幕时,时间小于我们设置的长按时间,则为点击事件,清除定时器,结束长按逻辑
		clearTimeout(timeOutEvent);
	});
}
  • 0
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值