vue.js：如何处理同一元素上的click和dblclick事件

JavaScript

梅十三

2020-03-12

我有一个vue组件，具有click / dblclik的单独事件。单击（取消）选择行，dblclick打开编辑表单。

<ul class="data_row"
  v-for="(row,index) in gridData"
  @dblclick="showEditForm(row,$event)"
  @click="rowSelect(row,$event)"
>

这样做，双击会触发3个事件。两个单击事件，最后一个dblclick。由于click事件首先触发，是否有办法（将click事件推迟固定的毫秒数）以阻止double上click事件的传播？

在这里摆弄

第1236篇《vue.js：如何处理同一元素上的click和dblclick事件》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共1个回答
阿飞GO 2020.03.12

我认为我有一个更简单的解决方案（我正在使用vue类，但适用相同的原则）：

private timeoutId = null;
onClick() {
        if(!this.timeoutId)
        {
            this.timeoutId = setTimeout(() => {
                // simple click
            }, 50);//tolerance in ms
        }else{
            clearTimeout(this.timeoutId);
            // double click
        }
    }

它不需要计算点击次数。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android