JQuery的on事件多次触发问题

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

这样问题就解决了