防止click 事件多次触发

最新推荐文章于 2022-05-13 00:09:52 发布
原创 最新推荐文章于 2022-05-13 00:09:52 发布 · 1.2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何使用CSS禁用页面元素的点击事件，通过设置pointer-events属性为none实现。同时，探讨了在JavaScript中添加监听器处理单次点击事件的方法，即在触发一次点击后自动移除该监听事件，提高用户体验。

1. 点击后添加属性

pointer-events: none;

2.增加监听器，监听点击事件，监听到一次点击事件后移除该监听事件。

 

防止多次触发click事件
心若向阳 无谓悲伤
03-10 1580
一、问题描述 用户频繁触发同一表单的提交按钮可能会导致流程或程序紊乱 二、需求 满足问题需求，在不妨碍用户使用的情况下禁止程序多次被触发 三、实现逻辑 完成触发后解绑点击/相关事件 四、实现代码 1、知识点补充 unbind（）方法 （1） 官方说明：unbind() 方法移除被选元素的事件处理程序。该方法能够移除所有的或被选的事件处理程序，或者当事件发生时终止指定函数的运行。 （2）简单理解：解绑，与绑定相对 2、代码 <%...
记录--按钮防连点终极解决方案
林恒的博客
01-08 1544
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 引言 在日常前端开发中，我们经常会面对一个让人头疼的问题：按钮被用户点击了两次以上，导致出现重复提交表单或者发送重复的请求。这个问题常见而且恼人。为了解决这个问题，我们需要一个又简单又实用的方法，可以在不搞乱原有代码的情况下，有效地防止按钮被连续点击。 背景 随着网页应用变得越来越复杂，用户在页面上的交互也变得越来越频繁。这就使...
防止事件多次触发请求
那一刻的博客
08-09 557
防抖节流 在进行窗口的resize、scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时我们可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果 防抖 当持续触发事件时，不执行函数，但是当触发停止一段时间后才执行一次 节流 当持续触发事件时，也必需一段时间之内容再执行一次 function jieliu(fn, wait) { // 开始时间 var startTime = Da
防止多次触发
m0_62229785的博客
05-13 122
wxml js
禁止事件被快速点击触发多次
qq_36222425的博客
02-15 331
开发过程中，我们有时需要对 function 或者 fetch 接口加保护，禁止事件被连续触发多次。 首先新建一个 OnceTap.js 文件 // eslint-disable no-undef let isCalled = false; let timer; //@param callBack 回调函数 // @param interval 定时器 let OnceTap = (cal...
多次触发点击click事件
weixin_zsh的博客
07-20 1980
出现的问题是：第一次点击click，执行一次行为；第二次点击click，执行两次行为；第三次点击click，执行三次行为；依次类推。。 希望实现的是：每点击一次click，执行一次行为 解决方法： 先解绑click,再绑定click var n=0; $("#rolls").unbind("click").click(function(){ n++; $("#"+i...
多次注册事件会导致一个事件被触发多次的解决方法
09-05
`.one()`只允许事件处理函数执行一次，之后会自动解绑，防止了多次触发的问题： ```javascript $(".pNext").one("click", this.onNext); ``` 在编写JavaScript代码时，理解事件注册机制以及如何有效地管理事件绑定...
WPF中button按钮同时点击多次触发click解决方法
10-19
在实际应用中，开发者应当根据具体需求和上下文环境，选择是否使用这种方法或其他类似方法，例如在按钮点击事件处理函数中加入一定的时间间隔来阻止快速多次触发等策略。总之，合理处理按钮点击事件，可以提升用户...
手动多个click事件防止多触发1
08-08
在JavaScript和jQuery编程中，有时候我们需要处理多个点击事件，但为了避免事件被多次触发，需要进行适当的控制。在给定的示例中，开发者通过引入一个`flag`属性来实现这一目标，这是一种常见的防止事件重复触发的...
C# 防止按钮botton重复“点击”的方法
War
07-13 6670
在使用C#的按钮控件的时候，经常我们想如果出现了多次点击的时候只让其在执行的时候只响应一次。这个时候很多人可能会想到使用Enable=false, 但是实际情况是还是会被多次触发，因为C#采用的是消息队列机制，这个时候我们只需要在Enable = true 之前加一句Application.DoEvents();就能达到防止重复点击的问题。 private void btnGenerateShape_Click(object sender, EventArgs e) { ...
maysq数据库防止多并发 ，php防止一条数据多次请求 一秒触发多次请求
宋拾壹的博客
06-04 806
maysq数据库防止多并发 ，php防止一条数据多次请求 一秒触发多次请求 防止用户1秒多请求统一数据 if (Session::get($id)){ //如果存在session，带表是多次请求，延迟1秒，或者几秒（根据自己的需求设置） if (time()-Session::get($id)<=1){ $this->error('很抱歉！'); }else{ Session::set($id,time()); } }else{ Ses
防止按钮多次快速点击,防误触
Stephen2Wong的博客
03-21 4577
在处理点击事件的时候,在外层加入以下代码 long currentTime = Calendar.getInstance().getTimeInMillis(); if (currentTime - lastClickTime > MIN_CLICK_DELAY_TIME) { lastClickTime = curren
【C#】AddHandler可重复多次添加事件处理器的问题
weixin_33898876的博客
03-22 574
问题：在项目中发现，可以重复多次添加同一个Handler，导致触发时执行多次的问题。 这个现象也很好测试： 前台准备一个Label文本 &lt;Label x:Name="label" Content="测试重复多次AddHandler点击事件" Width="300" Height="200" HorizontalContentAlignment="Center" Ver..
C# 防止委托事件多次注册
xiaoxl084520的博客
05-18 2758
public interface ILog { void AddLog(); event EventHandler<Exception> Error; } public class Logger : ILog { public bool LastEvent { get; set; } ...
防止重复点击按钮方案总结
smils的博客
09-04 922
第一种 按钮按下之后，将按钮置成不可点击，一段时间后设置回来。 代码如下 public static void disabledView(final View v) {           v.setClickable(false);           new Handler().postDelayed(new Runnable() {                 
防止Button的频繁点击
niuzhucedenglu的博客
05-11 2685
代码比较简单直接附代码： public abstract class OnSingleClickListener implements OnClickListener { private long preTime ; private int delaySecond = 500 ; // 默认两次点击的间隔为 500 毫秒 public OnSingleClickListener(
C#防止页面多次提交的方法
coberup的博客
09-05 2404
2015-11-19 11:39:49 存在问题： C#点击提交按钮后会触发多次提交事件 解决方案： 1）方法一 提交按钮增加OnClientClick=”if(!confirm(‘是否确定提交？’))return false;” 2）方法二 在事件结束后进行页面跳转 3）方法三 （在某些时候，在form里不加defaultButton点击回车也会触发提交，这时就用下列方法...
解决C#中FileSystemWatcher类的Changed事件触发多次的问题。
weixin_30446197的博客
06-27 299
fsw = new FileSystemWatcher(System.Environment.CurrentDirectory + "\\conf\\","*.xml"); fsw.EnableRaisingEvents = true; fsw.NotifyFilter = NotifyFilters.LastWrite; ...
touchstart防止多次触发事件方法
最新发布
06-19
<think>我们正在处理一个关于防止touchstart事件多次触发的问题。根据用户需求，我们需要找到在JavaScript中防止touchstart事件被多次触发的最佳实践。根据引用[3]，我们知道触摸事件包含三个触摸列表：touches,targetTouches,和changedTouches。在touchstart事件中，我们可以利用这些列表来跟踪触摸点。防止事件多次触发的一个常见方法是使用“防抖”（debounce）或“节流”（throttle）技术。但是，在触摸事件中，我们可能更希望立即响应第一次触摸，而忽略后续在同一元素上短时间内发生的多次触摸（比如由于误触或多指触摸导致的）。然而，另一种方法是使用一个标志变量（flag）来标记事件是否已经被处理。但是，在触摸事件中，由于可能有多个手指同时触摸，我们需要更精细的控制。考虑到触摸事件的特点，我们可以利用事件对象中的标识符（identifier）来跟踪不同的触摸点。对于同一个触摸点，我们可能只希望触发一次事件。但是，用户的问题是关于防止多次触发，可能是针对同一个触摸动作（例如用户快速点击多次）或者是多个手指同时触摸。我们需要明确：1.如果是指防止同一个手指快速多次触发，我们可以使用节流或防抖。2.如果是指防止多个手指同时触摸时只触发一次，那么我们可以选择只处理第一个触摸点。根据引用[2]中的示例，他们只是简单地添加了事件监听，没有做防止多次触发的处理。实际上，在移动端开发中，我们经常需要处理快速点击（tap）事件，因为移动设备上click事件有延迟，所以我们会使用touch事件来模拟tap。而模拟tap事件时，我们需要防止双击（doubletap）或者多次点击。一个常见的做法是：在touchstart事件中设置一个定时器，在短时间内（例如300ms）忽略后续的touchstart事件。但是这种方法可能会影响多个手指的操作。另一种方法是：在事件处理函数中立即移除事件监听，然后在一定的延迟后再重新添加。这种方法可以确保一次触摸只触发一次。然而，根据最佳实践，我们通常使用一个标志变量来记录上一次触摸的时间，然后与当前时间比较，如果时间差小于某个阈值，就忽略当前事件。我们还可以考虑使用事件委托，并检查事件目标是否与上一次相同，然后决定是否处理。综合以上，我们可以提供以下解决方案：方案1：使用时间戳，记录上一次触发事件的时间，如果当前时间与上一次时间差小于阈值，则忽略。方案2：使用事件对象的属性，比如检查changedTouches的长度，如果大于1（多个手指同时触摸），可以选择只处理第一个触摸点或者忽略后续触摸点。但这可能不是用户想要的，因为用户可能希望允许同时多个手指操作，只是防止同一个手指的快速重复。因此，我推荐使用时间戳的方法。示例代码：```javascript//设置一个全局变量记录上一次touchstart的时间letlastTouchStartTime=0;constthreshold=500;//阈值，500毫秒内只触发一次document.addEventListener('touchstart',function(event){constcurrentTime=newDate().getTime();if(currentTime-lastTouchStartTime<threshold){//如果距离上次触发时间小于阈值，则阻止本次事件event.preventDefault();return;}lastTouchStartTime=currentTime;//正常处理事件//...});```但是，这种方法有一个缺点：它会阻止在阈值内的所有touchstart事件，包括可能来自不同手指的触摸。如果用户需要支持多指操作，这种方法就不合适了。因此，我们需要更精细的控制：我们可以为不同的触摸点分别记录时间。然而，在touchstart事件中，我们可以通过event.changedTouches来获取本次事件中改变的触摸点（即新按下的手指）。每个触摸点都有一个唯一的identifier。我们可以这样做：```javascript//记录每个触摸点最后一次触摸的时间，用identifier作为keyconstlastTouchTimes={};constthreshold=500;document.addEventListener('touchstart',function(event){//遍历本次事件中所有新按下的触摸点for(leti=0;i<event.changedTouches.length;i++){consttouch=event.changedTouches[i];constidentifier=touch.identifier;constcurrentTime=newDate().getTime();if(lastTouchTimes[identifier]&&currentTime-lastTouchTimes[identifier]<threshold){//如果这个触摸点在阈值内触发过，则阻止这个触摸点的事件（但注意，我们无法单独阻止一个触摸点，只能阻止整个事件）//由于无法单独阻止某个触摸点的事件，我们可以选择忽略这个触摸点，或者阻止整个事件。//如果希望整个事件都不处理，则：event.preventDefault();return;}lastTouchTimes[identifier]=currentTime;}//正常处理事件//...});```但是，上面的代码在遇到一个触摸点快速重复时，会阻止整个事件（包括其他同时发生的触摸点）。这可能不是我们想要的。另一种方法：我们可以标记那些在阈值内的触摸点，然后在事件处理逻辑中跳过这些触摸点。但是，这需要我们在业务逻辑中处理。实际上，我们通常不需要为每个触摸点单独记录，因为用户快速重复触摸通常是用同一个手指（同一个identifier）进行的。所以，我们可以只考虑同一个触摸点的快速重复。然而，在移动端，我们通常不会在同一元素上同时接收到多个独立的触摸序列（即多个手指轮流快速点击）。所以，使用全局时间戳已经可以满足大部分需求。如果用户确实需要支持多指操作，那么我们应该允许不同的手指独立触发事件，但同一个手指快速点击则进行限制。这时，我们可以使用第二种方法，但只阻止该触摸点，而不是整个事件。然而，事件对象并没有提供阻止单个触摸点的方法。所以，我们只能选择在事件处理函数中忽略这些触摸点。这需要我们在处理事件时，遍历changedTouches，并跳过那些在阈值内的触摸点。示例：```javascriptconstlastTouchTimes={};constthreshold=500;document.addEventListener('touchstart',function(event){//创建一个数组，用于存放需要处理的触摸点constvalidTouches=[];for(leti=0;i<event.changedTouches.length;i++){consttouch=event.changedTouches[i];constidentifier=touch.identifier;constcurrentTime=newDate().getTime();if(lastTouchTimes[identifier]&&currentTime-lastTouchTimes[identifier]<threshold){//跳过这个触摸点continue;}lastTouchTimes[identifier]=currentTime;validTouches.push(touch);}if(validTouches.length===0){//如果没有有效的触摸点，可以选择阻止默认行为event.preventDefault();return;}//正常处理validTouches中的触摸点//...});```注意：我们还需要在touchend或touchcancel事件中清理lastTouchTimes，否则这个对象会越来越大。我们可以在touchend事件中删除已经结束的触摸点记录。```javascriptdocument.addEventListener('touchend',function(event){for(leti=0;i<event.changedTouches.length;i++){consttouch=event.changedTouches[i];deletelastTouchTimes[touch.identifier];}});document.addEventListener('touchcancel',function(event){//touchcancel事件同样需要清理for(leti=0;i<event.changedTouches.length;i++){consttouch=event.changedTouches[i];deletelastTouchTimes[touch.identifier];}});```这样，我们就能有效地防止同一个触摸点（手指）在短时间内多次触发touchstart事件。总结：我们推荐使用第二种方法，即记录每个触摸点的最后一次触发时间，并在touchstart事件中过滤掉在阈值内的触摸点，同时注意在触摸结束时清理记录。但是，用户的问题可能只是针对单个手指的快速点击，那么使用第一种全局时间戳的方法更简单，且性能更好。因此，根据实际需求选择：1.如果不需要支持多指同时操作，使用全局时间戳。2.如果需要支持多指操作，且要防止同一个手指快速重复，则使用第二种方法。通常，第一种方法已经足够，因为用户快速点击一般是用同一个手指。所以，我们可以给出两个版本的代码。版本1（简单场景）：```javascriptletlastTouchStart=0;constthreshold=500;//毫秒element.addEventListener('touchstart',function(e){constnow=Date.now();if(now-lastTouchStart<=threshold){e.preventDefault();return;}lastTouchStart=now;//处理事件});```版本2（支持多指）：```javascriptconstlastTouchTimes={};constthreshold=500;functionhandleTouchStart(event){constvalidTouches=[];constchangedTouches=event.changedTouches;for(leti=0;i<changedTouches.length;i++){consttouch=changedTouches[i];constid=touch.identifier;constcurrentTime=Date.now();if(lastTouchTimes[id]&&currentTime-lastTouchTimes[id]<threshold){continue;}lastTouchTimes[id]=currentTime;validTouches.push(touch);}if(validTouches.length===0){event.preventDefault();return;}//处理validTouches//...}functionhandleTouchEnd(event){constchangedTouches=event.changedTouches;for(leti=0;i<changedTouches.length;i++){consttouch=changedTouches[i];deletelastTouchTimes[touch.identifier];}}element.addEventListener('touchstart',handleTouchStart);element.addEventListener('touchend',handleTouchEnd);element.addEventListener('touchcancel',handleTouchEnd);```用户可以根据自己的需求选择合适的版本。另外，引用[1]中提到，添加触摸事件的阻止默认行为的好处不仅仅只有这一个。因此，我们在阻止默认行为时需要谨慎，因为阻止默认行为可能会影响滚动、缩放等操作。在我们的代码中，只有当我们需要忽略事件时才调用`preventDefault()`，这通常是安全的。最后，我们提供最佳实践：对于大多数情况，版本1足够且简单；对于需要精细控制多指操作的场景，使用版本2。相关问题：1.在JavaScript中处理触摸事件时，如何区分不同的触摸点？2.除了防止多次触发，还有哪些常见的触摸事件处理技巧？3.移动端开发中，如何模拟点击事件（tap）并防止双击？</think>在 JavaScript 中防止 `touchstart` 事件多次触发的最佳实践，主要涉及以下几种方法： ### 方法 1：标志位 + 定时器（推荐） ```javascript let isTouched = false; // 触摸状态标志 element.addEventListener('touchstart', function(e) { if (isTouched) { e.preventDefault(); return; // 阻止重复触发 } isTouched = true; // 标记为已触摸 setTimeout(() => { isTouched = false; // 300ms后重置状态 }, 300); // 正常处理逻辑 console.log('Touch processed'); }); ``` **原理**： 通过标志位 `isTouched` 记录触摸状态，在 300ms 内阻止新事件（时间阈值可根据需求调整）。结合 `setTimeout` 自动重置状态[^3]。 --- ### 方法 2：事件委托 + 标识追踪 ```javascript const activeTouches = new Set(); // 存储活动触摸点 document.addEventListener('touchstart', function(e) { const touch = e.changedTouches[0]; // 检查该触摸点是否已存在 if (activeTouches.has(touch.identifier)) { e.preventDefault(); return; } activeTouches.add(touch.identifier); // 记录新触摸点 // 处理逻辑 console.log(`Touch ID: ${touch.identifier} started`); }); document.addEventListener('touchend', (e) => { const touch = e.changedTouches[0]; activeTouches.delete(touch.identifier); // 移除结束的触摸点 }); ``` **优势**： 精确追踪每个触摸点的唯一标识符 (`touch.identifier`)，避免多点触摸导致的误判[^3]。 --- ### 方法 3：节流函数 (Throttling) ```javascript function throttle(func, delay) { let lastCall = 0; return function(...args) { const now = Date.now(); if (now - lastCall < delay) return; lastCall = now; func.apply(this, args); }; } element.addEventListener('touchstart', throttle((e) => { console.log('Throttled touch'); // 处理逻辑 }, 300)); // 300ms内仅触发一次 ``` **适用场景**： 适用于需要控制事件触发频率的场景，如连续滑动操作[^1]。 --- ### 关键注意事项 1. **清理触摸点** 务必在 `touchend`/`touchcancel` 中清理状态，避免内存泄漏： ```javascript document.addEventListener('touchend', clearTouchState); document.addEventListener('touchcancel', clearTouchState); ``` 2. **阻止默认行为** 谨慎使用 `e.preventDefault()`，某些情况下会阻断页面滚动等原生行为[^1]。 3. **移动端兼容性** 始终通过 `changedTouches` 获取当前事件相关的触摸点，而非 `touches`（包含所有活动触摸点）[^3]。 --- ### 总结最佳实践 | **方法** | **适用场景** | **优点** | |----------------|--------------------------|-----------------------------| | 标志位 + 定时器 | 简单点击/按钮操作 | 实现简单，内存占用低 | | 标识追踪 | 多点触摸场景 | 精准控制每个触摸点 | | 节流函数 | 滑动/连续触发事件 | 控制事件触发频率 | 建议优先使用 **标志位 + 定时器** 方案，它在大多数场景下能以最小开销解决问题。对于复杂交互（如绘图应用），选择 **标识追踪** 方案更可靠。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值