鼠標跟隨 · Javascript核心基礎

[toc] ![](https://box.kancloud.cn/7454c4f2bc597df1ca6436449bed9bfc_898x323.png) JQ版 ``` //->等價于$(document).ready() 當頁面上的HTML結構都加載完成后執行對應的函數 $(function(){ var $box = $('#box'),$mark = $('#mark'); var $boxOffset = $box.offset(); //->獲取當前元素距離body的偏移{top:xxx,left:yyy} $box.children("img").bind("mouseover",function(e){ e = e || window.event; e = e.target || e.srcElement; var left = e.clientX - $boxOffset.left +10; var top = e.clientY - $boxOffset.top + 10; //->hide、toggle、slideDown、slideUp、slideToggle、fadeIn、fadeOut、fadeToggle、animate... $mark.show(500).css({left:left,top:top}).find("img").attr("src",e.target.getAttribute("bigImg"));//children是只找子 find是找所有后代 }) ....; // $box.children("img").on("mouseover") // $box.children("img").mouseover(function(){}) }); ``` ## 注意事項 1. 鼠標移動過快的話可能會到mark上（觸發mark的mouseover，再冒泡到box的mouseover（也就會再創建一個div）），當mark反應過來跟上的時候，也就會觸發mark的mouseout，mark的mouseout會傳播到box上，也會觸發box的mouseout(刪除div)，但此時mark已經從鼠標爪子下溜走，mark重新出現在box上，會觸發box的mouseover(創建div) （需要阻止mask的傳播，還要在第一創建mask后取消box的mouseover對應創建div的事件） 2. 鼠標如果過快跑到mark上，但沒有跑出box，也不會觸發mouseout，下面這個例子可以確定 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #father{ width: 400px; height: 400px; border:1px solid black; } #son{ width: 50px; height: 50px; background:rebeccapurple; position: absolute; } </style> </head> <body> <div id="father"> <div id="son"></div> </div> <script> father.addEventListener('mouseover',function(e){ console.log(1); }) father.addEventListener('mouseout',function(e){ console.log(2); }) father.addEventListener('mousemove',function(e){ son.style.left = e.clientX+'px'; son.style.top = e.clientY+'px'; }) </script> </body> </html> ``` ## onmouseenter 兼容性:ie7沒問題 onmouseenter和onmouseover都是鼠標滑上去的行為，但是onmouseenter瀏覽器默認阻止了它的冒泡傳播；而onmouseover是存在冒泡傳播的，想要阻止要自己寫代碼 ## 鼠標跟隨的問題放大鏡和submenu的區別在于，submenu從主容器移動到 mark上會觸發mouseout/leavr，而放大鏡不會（因為放大鏡的mark就在主容器里）；并且從mark上移開也會觸發主容器的 mouseout/leave（因為冒泡） ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #father{ width: 200px; height: 50px; position: relative; background:pink } #son{ width: 100px; height: 100px; border:1px solid black; position: absolute; top:50px; display: none } #father:hover #son{ display: block } </style> </head> <body> <div id="father"> <div id="son"></div> </div> <script> father.onmouseover = function(){ console.log(1); son.style.display = 'block'; } father.onmouseout = function(){ console.log(2); son.style.display = 'none'; } son.onmouseover = function(){} </script> </body> </html> ```