一、问题描述

用户频繁触发同一表单的提交按钮可能会导致流程或程序紊乱

二、需求

满足问题需求，在不妨碍用户使用的情况下禁止程序多次被触发

三、实现逻辑

完成触发后解绑点击/相关事件

四、实现代码

1、知识点补充

unbind（）方法

（1）官方说明：unbind() 方法移除被选元素的事件处理程序。该方法能够移除所有的或被选的事件处理程序，或者当事件发生时终止指定函数的运行。

（2）用途：unbind() 方法适用于任意由 jQuery 添加(如on、bind等)的事件处理程序。

（3）简单理解：解绑，与绑定bind()相对

其他常见绑定方法详解

2、代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>避免重复触发事件</title><script type="text/javascript" src="js/jquery-2.1.1.js"></script></head><body><div style="height: 500px;width: 200px;background-color: orange"></div><a href="#" id="trigger">避免点击事件的多次触发</a><script type="text/javascript">$("#trigger").bind('click',function(){$("#trigger").unbind();alert("哇哈哈哈");});/*  2种方式都可以实现需求，任选其一即可$("#trigger").on('click',function(){$("#trigger").unbind();alert("哇哈哈哈");}); */</script></body>
</html>

PS:需要注意的是，该方法仅适用于动态绑定的方法，而不是自定义的方法，否则不好使【以下情况unbind无效】

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>防止多次点击</title><script type="text/javascript" src="js/jquery-2.1.1.js"></script>
</style><div style="height: 500px;width: 200px;background-color: orange"></div><a href="#" id="trigger" onclick="aaa();">避免点击事件的多次触发</a><script type="text/javascript">function aaa(){$("#trigger").unbind();alert("哇哈哈哈");};</script></body>
</html>

防止多次触发click事件相关推荐

[C# 基础知识系列]专题五：当点击按钮时触发Click事件背后发生的事情
引言: 当我们在点击窗口中的Button控件VS会帮我们自动生成一些代码,我们只需要在Click方法中写一些自己的代码就可以实现触发Click事件后我们Click方法中代码就会执行,然而我一直有一个疑 ...
JavaScript 触发click事件兼容FireFox，IE 和 Chrome
解决了火狐下无法触发click事件的问题 <script language="javascript">function test2(name){if(document. ...
触发dblclick事件时，避免触发click事件-实例
正常情况下触发双击dblclick事件时会同时触发两遍单击click事件,这肯定不是我们想要的结果,那么如何避免伴随触发click事件呢? 浏览器监听双击事件的机制是,有没有在一定时间内监听到两次连续 ...
ios 不能触发click事件
1. 大部分介绍说可以在目标元素上使用样式cursor:pointer来解决该问题! 但我这边这么搞没成功.就换了事件类型, 用touchend替换click事件 2. 使用touchend事件,又引 ...
vue实现自动触发click事件
使用vue自定义指令实现 1.html <el-menu-item:index="item.id+''"v-for="(item,index) in assitio ...
JQuery 自动触发 a 标签的 click事件
前言 JQuery 使用 trigger 可以自动触发 HTML元素的 click() 方法 a标签有些特殊,JQuery无法使用 trigger 触发 a 标签click事件,需要迂回一下. a标签 ...
js触发php事件,JavaScript_代码触发js事件(click、change)示例应用，Chrome , Firfox 不支持fireEvent的方 - phpStudy...
代码触发js事件(click.change)示例应用 Chrome , Firfox 不支持fireEvent的方法可以使用dispatchEvent的方法替代, 直接给一个兼容的Code. 触发c ...
阻止 mousemove 或 touchmove 与 click 事件同时触发
最近做了自己的开源项目 Msw-Tools,参考了 VConsole 工具中按钮的拖拽功能,计划给 MSW 按钮也增加类似的拖拽效果,并兼容PC端和手机端,但是遇到一个问题:一个按钮绑定了多个事件,怎 ...
JS触发Click操作以及获得事件源（转）
firefox下js触发click事件:<a href="http://zochegua.blog.163.com/blog/#" οnclick="test1(' ...

防止多次触发click事件