解决双击事件触发两次单击事件

问题

在写前端的时候，偶然发现，当同一个标签同时绑定了 双击事件 和 单击事件

在触发 双击事件 的时候，会先触发两次 单击事件，这显然是不符合预期的

解决办法

可以通过增加一个延时来解决这个问题

写一个按钮

这里写一个按钮来演示

<body>
    <button onclick="handleClick()" ondblclick="handleDblClick()">点击或双击我</button>
</body>
<script>
    const handleClick = () => {
        console.log('单击事件');
    };
    const handleDblClick = () => {
        console.log('双击事件')
    }
</script>

效果

双击后

查看控制台

可以看到，双击会先触发两次单击

通过延时保证单击

<body>
    <button onclick="handleClick()" ondblclick="handleDblClick()">点击或双击我</button>
</body>
<script>
    let clickTimeout = null;
    const handleClick = () => {
        if (this.clickTimeout) {
            // 如果已经设置了定时器，说明是双击事件，取消定时器
            clearTimeout(this.clickTimeout);
            this.clickTimeout = null;
            console.log('双击事件');
        } else {
            // 如果没有设置定时器，说明是单击事件，设置定时器并等待一段时间
            this.clickTimeout = setTimeout(() => {
                console.log('单击事件');
                this.clickTimeout = null;
            }, 200);
        }
    };
    const handleDblClick = () => {
        console.log('双击事件')
    }
</script>

效果

双击后

补充

如果是在vue2中使用

<template>
    <div>
        <button @click="handleClick" @dblclick="handleDblClick">点击或双击我</button>
    </div>
</template>
<script>
export default {
    methods: {
        handleClick() {
            if (this.clickTimeout) {
                // 如果已经设置了定时器，说明是双击事件，取消定时器
                clearTimeout(this.clickTimeout)
                this.clickTimeout = null
                console.log('双击事件')
            } else {
                // 如果没有设置定时器，说明是单击事件，设置定时器并等待一段时间
                this.clickTimeout = setTimeout(() => {
                    console.log('单击事件')
                    this.clickTimeout = null
                }, 200)
            }
        },
        handleDblClick() {
            console.log('双击事件')
        }
    },
    data() {
        return {
            clickTimeout: null
        }
    }
}
</script>
posted @ 2024-02-08 10:16  厚礼蝎  阅读(173)  评论(0)  编辑  收藏  举报