tap事件

  1. tap事件是用来区分移动端的click事件的
  2. 在移动端,click事件有延迟,延迟主要是判断当前是滑动还是点击,延迟时间大约有300ms
  3. 为了提升用户体验,tap事件可以降低延迟的时间
    下面是实现tap事件的思路
var bindTapEvent = function(dom,callback){
	var startTime = 0;
	var isMove = false;
	dom.addEventListener('touchstart',function(){
		startTime = Date.now();
		console.log(startTime);
	});
	dom.addEventListener('touchmove',function(){
		isMove = true;
	});
	dom.addEventListener('touchend',function(e){
		console.log(Date.now()-startTime);
		if((Date.now()-startTime)<250&&isMove == false){
			callback&&callback.call(this,e)
		}else{
			console.log('失败');
		}
		isMove = false;
		startTime = 0;
	});
};
bindTapEvent(box,function(e){
	console.log(e);
	console.log(this);
	console.log('tap事件');
})
  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您好,以下是一个简单的实现示例: ```html <!-- wxml代码 --> <view class="outer" bindtap="handleTap1"> outer view <view class="middle" bindtap="handleTap2" catchtap="stopPropagation"> middle view <view class="inner" bindtap="handleTap3"> inner view </view> </view> </view> ``` ```js // js代码 Page({ //handleTap1为点击outer view时触发的事件处理函数 handleTap1: function() { console.log('outer view'); }, //handleTap2为点击middle view时触发的事件处理函数 handleTap2: function() { console.log('middle view'); }, //handleTap3为点击inner view时触发的事件处理函数 handleTap3: function() { console.log('inner view'); }, //stopPropagation为阻止事件冒泡的函数 stopPropagation: function(e) { e.stopPropagation(); } }) ``` 解释一下代码: 1. 在 wxml 中,我们定义了三个 view,它们分别有不同的 class 名称,用于在 JS 中区分它们。 2. 我们在每个 view 上绑定了一个 tap 事件处理函数,分别为 handleTap1、handleTap2 和 handleTap3。 3. 我们给 middle view 绑定了 catchtap 事件处理函数 stopPropagation,用来阻止事件冒泡。 4. 在 JS 中,我们定义了三个事件处理函数,它们分别输出相应的日志信息。 5. 我们还定义了一个阻止事件冒泡的函数 stopPropagation,它会在 middle view 上捕获 tap 事件,并阻止它向父节点传递。 当我们点击 inner view 时,会依次输出 inner view、middle view 的日志信息;当我们点击 middle view 时,只会输出 middle view 的日志信息;当我们点击 outer view 时,只会输出 outer view 的日志信息。这就说明了事件冒泡被正确地阻止了。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值