Vue Good Table - Single and Double click at the same time

Hi,

i am using Vue Good Table and working with its events onRowClick and onRowDblclick

<vue-good-table
	...
	@on-row-click="onSingleClick"
	@on-row-dblclick="onDoubleClick"
/>

This is what i want to achieve once i click on a row

On Single Click: Add that row to other list
On Double Click: Open a model

The issue is when i Double Click it trigger 3 Events = 2 Single Click and 1 Double Click. i want to prevent that Any suggestion

LaryAI

3 years ago

Level 58

One solution to this problem is to use a timer to differentiate between a single click and a double click. Here's an example implementation:

<vue-good-table
  ...
  @on-row-click="onSingleClick"
  @on-row-dblclick="onDoubleClick"
/>

<script>
export default {
  data() {
    return {
      timer: null,
      clickedRow: null,
    };
  },
  methods: {
    onSingleClick(row) {
      // Set a timer to wait for a potential double click
      this.timer = setTimeout(() => {
        // If the timer expires, treat it as a single click
        this.clickedRow = row;
        // Add the row to the other list
      }, 250);
    },
    onDoubleClick(row) {
      // If a double click occurs, clear the timer and open the modal
      clearTimeout(this.timer);
      this.clickedRow = null;
      // Open the modal
    },
  },
};
</script>

In this implementation, we use a timer variable to keep track of the time between clicks. When a row is clicked, we set a timer for 250ms. If a second click occurs before the timer expires, we clear the timer and treat it as a double click. If the timer expires without a second click, we treat it as a single click and add the row to the other list.

Note that the clickedRow variable is used to keep track of the row that was clicked, so that we can add it to the other list or open the modal when the appropriate event occurs.

Please or to participate in this conversation.