如何实现.click元素点击事件2秒内仅触发一次？

嘿，我来帮你搞定这个点击控制的问题～你之前用event.stopPropagation()和event.preventDefault()完全找错方向啦，这俩是用来阻止事件冒泡和浏览器默认行为的，和控制点击频率根本没关系。要实现“首次点击立刻追加文本，之后2秒内不管点多少次都只触发一次”的效果，咱们得用状态标记法来跟踪是否处于冷却期。

正确实现代码 #

<!DOCTYPE html>
<html>
<head>
    <style>
        body { font: 13px Verdana; }
        span { display: inline-block; padding: 5px; }
    </style>
</head>
<body>
    <div class="click">click</div>
    <div class="append"></div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        // 初始化状态：默认允许点击
        let isClickAllowed = true;

        $(document).on('click', '.click', function() {
            // 如果处于冷却期，直接跳过
            if (!isClickAllowed) return;

            // 执行追加操作
            $('.append').append('<span>append</span>');

            // 关闭点击权限，进入冷却
            isClickAllowed = false;

            // 2秒后重新开放点击权限
            setTimeout(() => {
                isClickAllowed = true;
            }, 2000);
        });
    </script>
</body>
</html>

代码逻辑说明 #

• 我们用isClickAllowed这个变量作为开关：初始值是true，表示第一次点击可以直接生效。
• 每次点击时先检查开关状态：如果是false（冷却中），直接退出函数，不执行任何操作；如果是true，就执行追加文本的操作，然后把开关关掉，启动2秒定时器。
• 2秒后定时器触发，把开关重新打开，此时用户再次点击就会又一次触发追加操作，之后又进入冷却循环。

这种方法简单直接，完全适配你的需求，而且不会有多余的事件处理问题。

内容的提问来源于stack exchange，提问作者Bhuwan