jQuery mouseover與mouseenter,mouseout與mouseleave的區別

時間 2019-11-13

標籤 jquery mouseover mouseenter mouseout mouseleave 區別欄目 JQuery 简体版

原文原文鏈接

mouseover與mouseenter 不論鼠標指針穿過被選元素或其子元素，都會觸發 mouseover 事件。html

只有在鼠標指針穿過被選元素時，纔會觸發 mouseenter 事件。學習

mouseout與mouseleave指針

不論鼠標指針離開被選元素仍是任何子元素，都會觸發 mouseout 事件。htm

只有在鼠標指針離開被選元素時，纔會觸發 mouseleave 事件。seo

（這裏拿mouseout和mouseleave說明，mouseover和mouseenter道理相同）事件

mouseout過程好比有個父div（邊框區分）含有2個子div（紅色和黑色） html->body 代碼get

<body> <div id="father" style="width:200px;height:200px;border:1px solid #D7D7D7;"> <div id="son_1" style="width:150px;height:90px;background-color: red;"></div> <div id="son_2" style="width:150px;height:90px;background-color: black;"></div> </div> </body>io

在父div上加入mouseout事件 html->js 內容1console

$(function(){ $("#father").mouseout(function(event){ console.log(event.target||event.srcElement); console.log("mouseout"); }); }); 當鼠標從父容器外面（邊框外面）進入父容器，穿過2個子元素並移除，控制檯輸出結果是4個mouseout，4個mouseout，4個mouseoutevent

仔細觀察控制檯打印信息

分析並猜想可得知，過程以下： a:由於鼠標從父容器內離開，進入了紅色子容器中；第一次mouseout是父容器引發的 b,由於鼠標從紅色子容器內離開，進入了黑色子容器中；第二次mouseout是紅色子容器引發的 c,由於鼠標從黑色子容器內離開，進入父容器中，又從父容器內離開；第三次mouseout是黑色子容器引發的；第四次mouseout是父容器引發的全過程結束

mouseleave過程 html->js 內容2

$(function(){ $("#father").mouseleave(function(event){ console.log(event.target||event.srcElement); console.log("mouseleave"); }); }); 進行mouseout相同軌跡的鼠標運動過程，控制檯只輸出了1個mouseleave 仔細觀察控制檯打印信息,只有最後一次（即從父容器離開）觸發了mouseleave

至此，我想這2個event的區別和各自的具體說明，你們都學習到了。

參考來源： jQuery中的mouseleave和mouseout的區別 jQuery mouseover與mouseenter,mouseout與mouseleave的區別

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。