前端坑 繫結踩過的click的坑 111111 做前端幾個月，真的是各種坑都有，今天就來聊聊這幾天遇到的多次繫結click遇到的坑。留下一些自己的記錄！！ 首先是HTML這塊 這個是一個翻牌子的遊戲介面是這樣的 然後是HTML部分的

點我翻牌

點我翻牌

點我翻牌

點我翻牌

點我翻牌

點我翻牌

	    <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>
 

下面的函式是一開始的時候我對標籤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”,"");一開始的時候我認為還不行，這個不就是設定嗎，怎麼能說是去掉列。。。不管先試試，結果有效果了。。。。