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 -----') } }