Jquery 给一div注册事件问题,在jQuery给一个div注册事件的时候(如mouseover事件)时,同时会把div中的子元素也注
册上同样的事件。
html代码如下:
<div id="top" style="backgroud:gray;width:500px;height:600px;"> <div id="mid" style="backgroud:green;width:300px;height:400px;"> <div id= "thrid" style="backgroud:red;width:100px;height:200px;"> </div> </div> </div> <div id="log"></div>
Jquery代码:
jQuery(funciton ($){ $("#top").mouseover(funciton (){ log($(this).attr("id")+"top over"); }); $("#top").mouseout(funciton (){ log($(this).attr("id")+"top out"); }); }); function log(msg){ jQuery("#log").append(msg+"<br/>"); }
现在这种情况是当鼠标经过上面三个div(top,mid,third)中任何一个div时,都会触发 mouseover与mouseout事件
这不是我所想要的 网上找了相关资料 解决办法如下:
修改mouseout事件
$("#top").mouseout(funciton (e){ var e=e||window.event; //获取事件 var obj=e.relatedTarget||e.toElement; //获取mouseout 进入元素 f(obj != null && jQuery("#top").find(jQuery(obj)).length >0){ //obj找到了,只需判断他是不是绑定事件元素的子元素就可以了,如果是就不执行后面的事件 否则就执行 log($(this).attr("id")+"is child"); }else{ log($(this).attr("id")+"top out"); } });
参考:http://q.cnblogs.com/q/28184/
http://topic.csdn.net/u/20100417/16/9e1681e8-29b9-46c3-b764-a4d36545b226.html
注:纯手工敲写,有误自调