vue的touchStart事件及click事件冲突问题

时间:2021-2-20 作者:admin

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 -----')
  }
}
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。