【JS】同一个按钮绑定单击+双击事件

问题

同一个按钮需要绑定单击与双击事件

思路

• 只绑定click事件
• 触发click事件开启延时200ms
• 200ms内再次触发click视为双击，反之
• 延时控制在200毫秒以内，越短越好，避免影响用户体验

码

<button onClick="commentClk('假装我是数据')">按钮</button>
<script>
/**
 * 评论点击事件 ↓
 * - 双击 - 删除评论↓
 * - 单击 - 回复评论↓
 * @param {Object} data 评论的数据↓
 */
let clkCount = 0, timer = null;
const commentClk = data => {
    clkCount++
    
    //开启延时，200ms↓
    timer = setTimeout(() => { 
     clearTimeout(timer) 
    	//'双击↓
        if (clkCount >= 2) {  
              console.log('双击',data)
            return clkCount = 0
        }

        // 单击↓
        console.log('单击', data); 
        return clkCount = 0
    }, 200);
}
</script>