不能连续点击.md

title	date	tags
按钮不能重复点击	2015-10-01 16:52:01 -0700	JavaScript Event Listener

前言

今天要实现一个功能，你们知道的，有时候一个链接或者按钮 ，当点击一次无反应或者反应没那么快的时候，用户就有可能多次点击，这样浏览器就识别出点击多次，重复触发事件。

所以，要用JS来防止重复点击。

当然，这个可以绕过，只是在UI层面上的防止

原理

点击的时候，判断有没有某个class，如果有就不能点击。没有就可以点击。

实现

// js
var btn = document.querySelector('.next');
btn.addEventListener('click', function(){
	if (btn.classList.contain('disabled')) {
		return;
	}
	btn.classList.add('disabled');
	// your code
	
	
	// if success or error
	btn.classList.remove('disabled');
});

// jQuery
var btn = $('.next');
btn.on("click", function () {
	if (btn.hasClass('disabled')){
		return;
	}
	btn.addClass('disabled');
	
	// your code
	
	
	// if success or error
	btn.removeClass('disabled');
}