双击事件会触发两次单击事件问题

双击事件会触发两次单击事件问题

  问题描述：当在dom上同时绑定单击事件和双击事件时，点击双击事件会触发两次单击事件，这是我们不想看到的，而是应该单击事件与双击事件分开。

  分析：单击事件和双击事件区别就在间隔时间，当我们点击一次时，设置一个延时器，延时一定时间（300ms为好），在这300ms之内，在此点击，认定执行的是双击事件，如果超过300ms再点击第二次，执行的是单击事件。

  方案：

  单击事件代码：

handleNodeClick(data) {
      var that = this
      // 开启延时器，300ms的间隔区分单击和双击，解决双击时执行两次单击事件
      clearTimeout(that.time)
      that.time = setTimeout(() => {
        // 写单击事件执行的逻辑代码
  },300)
}

  双击事件代码：

    dbclickNode(node, data) {
      clearTimeout(this.time)
      // 触发dbclick事件,传入sonmsg值
      this.$emit('dbclick', data)