巧妙实现防止按钮重复点击

最新推荐文章于 2024-01-03 09:35:13 发布

前端一枚

最新推荐文章于 2024-01-03 09:35:13 发布

阅读量556

点赞数 1

分类专栏： css 文章标签： css截流

本文链接：https://blog.csdn.net/u011200562/article/details/133854924

版权

css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

在项目开发中，经常会有防重复点击的优化操作，我们可能会使用以下几种方式来实现：

控制按钮的 loading 参数
在每个需要防止重复点击的按钮操作上，使用 throttle 函数
封装一个公共的按钮组件，在需要的地方使用
通过css实现截流

利用动画实现节流

通过 active 鼠标点击的时候，清空动画
鼠标松开时，重新启动动画（2s 以后才能触发 onclick 事件）

<style>
    .btn {
        pointer-events: all;
        animation: btnAnim 2s step-end forwards;
    }
    .btn:active {
        animation: none
    }   
    @keyframes btnAnim {
        from {
            pointer-events: none;
        }
        to {
            pointer-events: all;
        }
    }
</style>
<body>
    <button class="btn" onclick="btnClick()">  按钮 </button>
</body>
<script>
    function btnClick(){  console.log(123) }
</script>