KING 博主等级

一帆风顺 ⛵️⛵️⛵️

防止DIV元素的点击事件重复点击

钟晓川
2023-06-26 / 9 点赞 / 914 阅读

为了防止 DIV 元素的重复点击,你可以通过以下几种方法来实现:

使用jQuery,你可以使用以下代码来实现防止DIV元素的重复点击

<div id="myDiv">点击我</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  $('#myDiv').click(function() {
    // 禁用元素
    $(this).css('pointer-events', 'none');
    
    // 执行其他逻辑代码
    
    // 重新启用元素(根据需要)
    setTimeout(function() {
      $('#myDiv').css('pointer-events', 'auto');
    }, 1000); // 设置一个适当的延迟时间
  });
});
</script>

在上述代码中,通过设置 pointer-events 属性为 none 来禁用元素的交互,从而达到防止重复点击的效果。在适当的延迟后,将 pointer-events 属性重置为 auto,使元素恢复可点击状态。

可以使用以下代码限制表单元素(如按钮、输入框等)重复点击

<div id="myDiv">点击我</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  $('#myDiv').click(function() {
    // 禁用元素
    $(this).prop('disabled', true);
    
    // 执行其他逻辑代码
    
    // 重新启用元素(根据需要)
    setTimeout(function() {
      $('#myDiv').prop('disabled', false);
    }, 1000); // 设置一个适当的延迟时间
  });
});
</script>

这里使用了 prop 方法来设置元素的 disabled 属性,实现禁用和启用。在点击事件处理程序中,首先禁用了被点击的元素,然后执行其他逻辑代码。通过设置一个适当的延迟时间后,重新启用元素。

总结

  1. 如果是表单元素(如按钮、输入框等)前端防重复点击使用 disabled
  2. 禁用 <div> 元素的最佳方式是使用 CSS 属性 pointer-events 来禁用元素的交互
9