JQuery的on事件多次觸發問題

問題描述:

程式碼如下:

<!-- 結構 --> 
<div class="content">
     <div id='result'></div>
     <div id="mask"></div>
 </div>

// js程式碼
$(function () {
	$(".content").on("mouseover", function () {
		$("#mask").on("click", function (e) {
			console.
 
log(e)
		})
	})
})

從程式碼上看,本應該是當我滑鼠移入.content這個盒子的時候給它裡面的#mask盒子註冊一個點選事件, 但是當我們點選#mask這個盒子的時候,你發現控制檯列印了不止一次點選事件的event,如下圖:
備註: 如果你是在點選事件上面設定了新增或刪除元素的樣式, 可能還會出現樣式新增不上或者取消不了的情況,也是這個原因引發的

出現上述的現象證明,點選事件觸發了多次

分析原因:

當滑鼠移入.content就會給#mask註冊點選事件,但是還沒有備觸發,屬於非同步執行;然後當發生點選動作時,每一次on註冊的點選事件都被觸發了,所以就會被多次執行!

解決辦法:

清除多餘的點選事件

程式碼如下:

$(function () {
	$(".content").on("mouseover", function () {
	// 先解除之前繫結的點選事件,然後再進行繫結
	// 可以使用unbind,也可以使用off,效果一樣
		$("#mask").unbind('click').on("click", function (e) {
			console.log(e)
		})
	})
})

這樣問題就解決了