1.问题:
今天遇到这样问题,给某个元素同时绑定touchStart及click事件后,若在移动设备上,当你点击时,会依次出发这两个事件。
2.解决方式preventDefault()方法
通过使用preventDefault方法(阻止元素默认事件行为的发生)来解决。在touchstart中添加 e.preventDefault()就可以阻止click事件触发。
<div
@touchstart="loop_click_start_fun"
@touchend="loop_click_end_fun"
@click.stop="click_fun"
></div>
data() {
return {
curloopClickObj: null
}
},
methods: {
loop_click_start_fun(e) {
clearTimeout(this.curloopClickObj)
this.curloopClickObj = setTimeout(() => {
console.info('----- touch fun -----')
e.preventDefault()
}, 3000)
},
loop_click_end_fun() {
clearTimeout(this.curloopClickObj)
},
click_fun() {
console.info('----- click fun -----')
}
}
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!