控制鼠標移上移下事件,在使用Jquery 的mouseover
,mouseout
事件時,元素內部含有其它元素,會造成該事件多次的觸發的情況。
問題解析
在用到mouseover
和mouseout
事件來作為事件觸發的條件,單一元素可以正常使用,但是如果我們用做觸發的元素內部有其他的元素的時候當鼠標移上的時候會反復 的觸發mouseover
和mouseout
事件。因為內部元素在鼠標移上的時候會向它的父對象派發事件,所以外面元素相當於也觸發了mouseover
事件。
解決方法
jquery(需要版本號大於1.2.2)中修復上述問題。
將mouseover,mouseout 替換 mouseenter和mouseleave事件,這是IE特有的函數,使用jquery就很好的解決了兼容問題。函數的原理當第一次鼠標進入節點區域時觸發,以后在節點區域內(子節點間)移動時不觸發。
綁定示例:
$('div').bind("mouseenter",function(){ // code }); $('div').bind("mouseleave",function(){ // code});