双击事件与单击事件冲突解决方案

问题来源：

对一个按钮进行单击和双击时所触发的事件是不一样的，但是双击时一定会触发两次双击事件单击，许多需求要求双击只触发

解决方法：

给单击事件一个延时器，给双击事件一个清除延时器的方法，只要在单击事件延时的范围类触发双击事件就会清楚该单击事件双击事件，单击只触发单击事件

<template>
    <div class="click">
           <h1>双击事件与单击事件冲突解决方案</h1>
           <div class="content">
     <h3>问题来源：</h3>
        <div>对一个按钮进行单击和双击时所触发的事件是不一样的，但是双击时一定会触发两次双击事件单击，许多需求要求双击只触发双击事件，单击只触发单击事件</div>
            
     <div class="exp">
            <span>如：单击时触发one 双击时触发事件two</span>
            <el-button type="primary" @click="one" @dblclick="two">单击/双击(旧)</el-button>
            <img src="../../../assets/images/space_img/dblclick1.png" alt="">
            <img src="../../../assets/images/space_img/dblclick2.png" alt="">
     </div>

     <h3>解决方法：</h3>
        <div>给单击事件一个延时器，给双击事件一个清除延时器的方法，只要在单击事件延时的范围类触发双击事件就会清楚该单击事件</div>
            
     <div class="exp">
            <span>如：单击时触发one _new,双击时触发事件two_new但同时会清除单击事件</span>
            <el-button type="primary" @click="one_new" @dblclick="two_new">单击/双击(改进)</el-button>
            <img src="../../../assets/images/space_img/okdbl1.png" alt="">
            <img src="../../../assets/images/space_img/okdbl2.png" alt="">
            <img src="../../../assets/images/space_img/okdbl3.png" alt="">
     </div>
           </div>
           
    </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
let timer=ref<any>(null)
    const one=()=>{
        console.log('单击');
        
    }
    const two=()=>{
        console.log('双击');
    }
    const one_new=()=>{
        clearTimeout(timer)//清除上一次单击的事件
        timer=setTimeout(function(){
            console.log('单击');
        },500)
    }
    const two_new=()=>{
        clearTimeout(timer)//清除单击事件
        console.log('双击');
    }

</script>