mouseout以及mouseover

兩個圖層 紅色圖層表明outside藍色圖層表明inside

dom結構以下

<div id="outside">
     <div id="inside">
     </div>
</div>

樣式爲

#outside{width:300px; height:180px;position:relative;background:red;}
     #inside{width:400px; height:200px;position:absolute;left:50px;top:50px;background:blue;}

分別爲這兩個圖層綁定事件 爲mouseout  mouseover事件

jquery代碼以下

$(function(){
$("#outside").hover(function(){
console.log("the mouse over outside");
},function(){
console.log("the mouse out outside");
});
$("#inside").hover(function(){
console.log("the mouse over inside");
},function(){
console.log("the mouse out inside");
});
});

分爲如下幾種狀況(1-3是一個完整的移入移出過程)

(1)鼠標從outside層進入 輸出信息爲

the mouse over outside

(2)鼠標從outside移入inside時的輸出信息爲 

the mouse over inside

注意：這時並無觸發outside的mouseout事件 因此輸出只有一條信息

(3)鼠標從inside移出 輸出信息爲

the mouse out inside

the mouse out outside

緣由是事件冒泡機制

 

 

4-6是一個完整的移入移出過程

(4)鼠標從inside層進入的輸出信息爲

the mouse over inside

the mouse over outside

緣由仍是事件冒泡

(5)鼠標從inside移入outside(前提是從inside移入)輸出的信息爲

the mouse out inside 

這時不會輸出the mouse over outside

(6)鼠標從outside移出 輸出信息爲

the mouse out outside

 

我的筆記 記錄學習過程