mouseover ,mouseout ,mouseenter,mouseleave區別
阿新 • • 發佈：2019-02-17
mouseover ,mouseout ,mouseenter,mouseleave，都是滑鼠事件。mouseover
,mouseout 是一組，mouseenter,mouseleave是一組。mouseenter,mouseleave是將被選元素和其包含的子元素看成一個整體，就相當
一個 合成的大元素。滑鼠進入這個合成的大元素時發生一次mouseenter，離開時發生一次mouseleave。如果某個元素添加了mouseover
,mouseout事件，其包含的元素都會新增mouseover ,mouseout事件，不論滑鼠指標穿過被選元素或其子元素，都會觸發
mouseover ,mouseout 事件。
例項：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script src="http://www.jq22.com/jquery/1.9.1/jquery.min.js"></script> <script> $(function () { $("#dd").on("mouseover", function () { alert("mouseover"); }); $("#dd").on("mouseout ", function () { alert("mouseout "); }); $("#dd").on("mouseleave", function () { alert("mouseleave"); }); $("#dd").on("mouseenter", function () { alert("mouseenter"); }); }) </script> </head> <body> <div id="dd" style="height: 100px ;width: 200px ;background-color: #459df5"> <div style="position: relative; left: 20px;background-color: #f55b72 ;height: 50px ;width: 70px;margin-left: 20px"></div> <div style="background-color: #70f560 ;height: 150px ;width: 50px;margin-left: 20px;margin-top: -20px"></div> </div> </body> </html>
、