1. The question is:

Today I ran into a problem where you bind the touchStart and Click events to an element and, on a mobile device, when you click, the two events will start in sequence.

2. SolutionsThe preventDefault () method

Solve this by using the preventDefault method (prevent element default event behavior). Adding e.preventDefault() to TouchStart prevents the click event from firing.

  <div
    @touchstart="loop_click_start_fun"
    @touchend="loop_click_end_fun"
    @click.stop="click_fun"
  ></div>

Copy the code
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 -----')}}Copy the code