Double click events and click events

Preface

When the project encounters a double-click event, the click event will be triggered at the same time bug, Or simply record .

one's innermost thoughts and feelings ： I am even more tired today . I used to spend several days alone reading other people's blogs , Read many blogs and then output them slowly . Now it's input and output ( Sometimes a long article is split into two parts in order to be lazy ), After collecting the wool of this full service , After that, I took part in more activities on the day ( Go on like this , I feel that the original intention of blogging is about to change )

Problem recurrence

<el-button type="primary" @click="myclick" @dblclick="mydblclick">
  test
</el-button>

function myclick() {
  console.warn(" Click events ");
}

function mydblclick() {
  console.error(" Double-click the event ");
}

image-20220619162952868

be perfectly logical and reasonable , Double click events are also double click events , So the click event will be triggered at the same time click And double click events dblclick. But the requirement is to click and double-click different processing , Therefore, the click event should not be triggered when double clicking .

Solution

Ideas ： You can use the function anti shake method , Click after the event is triggered , Turn on a timer , Double click the event trigger to clear the timer .

let timer;

function myclick() {
  timer = setTimeout(() => {
    console.warn(" Click events ");
  }, 300);
}

function mydblclick() {
  clearTimeout(timer);
  console.error(" Double-click the event ");
}

dblclick

It can be found that there are still problems , A double-click event will still trigger a single click event .

But this problem is actually a problem with the use of timers . Let's take a look at a small case .

let timer;

timer = setTimeout(() => {
  console.log(1);
});

timer = setTimeout(() => {
  console.log(2);
});

clearTimeout(timer);

In this case , prints 1. In other words, only the second timer is actually clear , So our previous code needs to clear the first timer .

let timer;

function myclick() {
  clearTimeout(timer);

  timer = setTimeout(() => {
    console.warn(" Click events ");
  }, 300);
}

function mydblclick() {
  clearTimeout(timer);
  console.error(" Double-click the event ");
}

Be accomplished .

el-checkbox Use caution

The problem of double click event and click event is solved , Plus the next project's stepping on the pit .

el-checkbox No event objects , Common event objects are el-checkbox Upper is Boolean , Indicates whether to select . But there are native versions .

<el-checkbox @change="mychange"></el-checkbox>
<input type="checkbox" @click="mychange" />

function mychange(e) {
  console.log(e);
}

el-checkbox

in addition , Directly modifying checkbox The value of the binding , Not trigger change event .

change Event directly modifying the value will not trigger .

<input type="checkbox" v-model="checked" @click="mychange" />
<button @click="myclick">change</button>

import { ref } from "@vue/reactivity";

const checked = ref(true);

function mychange(e) {
  console.log(e);
}

function myclick() {
  checked.value = !checked.value;
}

el-checkbox

You can modify the binding value directly while , Manual call change Event handler to simulate triggering change event , however , The parameter passing of the event object is not easy to simulate . Of course , If you are using el-checkbox Words , Because it has no event object , It's a Boolean , So just put checkbox The value of the current binding can be passed .