前端多次绑定click的坑

前端坑
绑定踩过的click的坑
111111
做前端几个月，真的是各种坑都有，今天就来聊聊这几天遇到的多次绑定click遇到的坑。留下一些自己的记录！！
首先是HTML这块
这个是一个翻牌子的游戏界面是这样的

然后是HTML部分的

<div class="weui-grids" id="draw">
	<a href="javascript:;" id="1" class="weui-grid">
		<div class="click" id="fugai1">
		    <p class="clickMe">点我翻牌</p>
		</div>
		<div class="back">
			<img class="info" src="ldimg/jieguo/1.png" alt="" id="jieguo1" >
			<p class="back-info" id="jguo1"></p>
		</div>
	</a>
	<a href="javascript:;" id="2" class="weui-grid">
		<div class="click" id="fugai2">
		    <p class="clickMe">点我翻牌</p>
		</div>
		<div class="back">
			<img class="info" src="" alt="" id="jieguo2">
			<p class="back-info" id="jguo2"></p>
		</div>
	</a>
	<a href="javascript:;" id="3" class="weui-grid">
		<div class="click" id="fugai3">
		    <p class="clickMe">点我翻牌</p>
		</div>
		<div class="back">
			<img class="info" src="" alt="" id="jieguo3">
			<p class="back-info" id="jguo3"></p>
		</div>
	</a>
	<a href="javascript:;" id="4" class="weui-grid">
		<div class="click" id="fugai4">
		    <p class="clickMe">点我翻牌</p>
		</div>
		<div class="back" >
			<img class="info" src="" alt="" id="jieguo4">
			<p class="back-info" id="jguo4"></p>
		</div>
	</a>
	<a href="javascript:;" id="5" class="weui-grid">
		<div class="click" id="fugai5">
		    <p class="clickMe">点我翻牌</p>
		</div>
		<div class="back">
			<img class="info" src="" alt="" id="jieguo5">
			<p class="back-info" id="jguo5"></p>
		</div>
	</a>
	<a href="javascript:;" id="6" class="weui-grid">
		<div class="click" id="fugai6">
		    <p class="clickMe">点我翻牌</p>
		</div>
		<div class="back">
			<img class="info" src="" alt="" id="jieguo6">
			<p class="back-info" id="jguo6"></p>
		</div>
	</a>
	<a href="javascript:;" id="7" class="weui-grid">
		<div class="click" id="fugai7">
			
		    <p class="clickMe">点我翻牌</p>
		</div>
		<div class="back">
			<img class="info" src="" alt="" id="jieguo7">
			<p class="back-info" id="jguo7"></p>
		</div>		
	</a>
	<a href="javascript:;" id="8" class="weui-grid">
		<div class="click" id="fugai8">
		    <p class="clickMe">点我翻牌</p>
		</div>
		<div class="back">
			<img class="info" src="" alt="" id="jieguo8">
			<p class="back-info" id="jguo8"></p>
		</div>
	</a>
	<a href="javascript:;" id="9" class="weui-grid">
		<div class="click" id="fugai9">
			
		    <p class="clickMe">点我翻牌</p>
		</div>
		<div class="back">
			<img class="info" src="" alt="" id="jieguo9">
			<p class="back-info" id="jguo9"></p>
		</div>
	</a>
</div>

下面的函数是一开始的时候我对标签a绑定click事件的。
然后在初始化的时候这个函数执行了两次（声明这块不是我写的）

var turn = function (target, time, opts) {	
		target.find('a').click(function (e) {
		   console.log("clickstate:"+clickstate);
			if (clickstate == 1) {
				return;
			}
			if(clickstate == 0){
				$("#draw a").css("background","none");
			}
			clickstate = 1;
			$("#toOneAgain").removeAttr("onclick");
			var current = $(this);
			var pos = $(this).context.id;
			toLottery($(this),time, opts,pos);
		});
	}

其实你看上去上面的代码是没有什么错误的各种功能执行的好好的，完全没有bug出现，但是我们老大让我优化一下就是当你第一次点击的时候会有点击效果，如果不再来一次就不能有点击效果。于是我各种查资料看资料。点击效果出现的原因是在标签a中设置了-webkit-tap-highlight-color: rgba(0,0,0,0);。。。。。。
于是我就想呀，当你第一次点击的时候使得上面这个属性失效（根据clickstate判断）；然后再来一次进行初始初始化的时候再加上这个属性就行；but依然不行，各种使用各种方法，我在上面这个函数里面加了console.log("cliclkstate:"+clickstate);
打印的时候发现我首次点击，输出的两行分别是0和1，然后第二次点击的时候出现了三行分别是0 1 1，第三次点的时候是四行，分别是0  1 1 1，一直点下去就一直加，我方了
一开始以为是冒泡的原因，但是找来找去，我再怎么冒泡应该只能冒2层的，那么最多输出2行呀！

痛苦ing

然后花了n久时间去查呀，试试代码。最终百度了一下绑定click，发现click事件是可以多次绑定的，并且同时起作用。
于是上述诡异的事件发生的原因是，一开始的时候a标签绑定click事件绑了两次，我第一次点击会执行两次click事件，然后我点再来一次的时候click事件又多绑定了一次，这个时候再点a标签区域的时候click事件会执行三次，依次下去就发生了刚刚那个诡异的事情。。。终于圆满解决了。解决办法如下
target.find(‘a’).unbind(“click”).click(function (e) {
console.log(“clickstate:”+clickstate);
if (clickstate == 1) {
return;
}
if(clickstate == 0){
$("#draw a").css(“background”,“none”);
}
clickstate = 1;
$("#toOneAgain").removeAttr(“onclick”);
var current = $(this);
var pos = $(this).context.id;toLottery($(this),time, opts,pos);
});
}

然后对于去掉上图点击时候出现的这种白色边框问题，一开始我是将-webkit-tap-highlight-color: 各种设置都没有用，最终设置KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲draw a").css("b…("#draw a").css(“background”,"");一开始的时候我认为还不行，这个不就是设置吗，怎么能说是去掉列。。。不管先试试，结果有效果了。。。。