jQuery面试题-区别mouseover和mouseenter的不同之处(看了也许对你有好处)
生活随笔
收集整理的這篇文章主要介紹了
jQuery面试题-区别mouseover和mouseenter的不同之处(看了也许对你有好处)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- 1.簡單闡述mouseover和mouseenter的不同之處
- 2.代碼實例測試
- 3.效果圖
1.簡單闡述mouseover和mouseenter的不同之處
mouseover:在移入子元素的時候也會觸發,對應mouseout
mouseenter:移入當前元素會觸發，如果有子元素，則不會觸發,對應mouseleave
hover():這個方法里面實質上就是使用mouseenter()和mouseleave()
2.代碼實例測試
<html><head><base href="<%=basePath%>"><title>My JSP 'practice_02.jsp' starting page</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">--><style type="text/css">*{margin:0;padding:0;}.div1 {position:absolute;display:flex;align-items:center;width:200px;height:200px;background-color:red;}.div2 {width:100px;height:100px;background-color:yellow;}.div3 {position:relative;display:flex;align-items:center;width:200px;height:200px;background-color:blue;left:300px;float:left; }.div4 {width:100px;height:100px;background-color:yellow;}</style></head><body> <div class="div1"><div class="div2">div2...</div>div1...</div><div class="div3"><div class="div4">div4...</div>div3...</div><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><script type="text/javascript">/*區別mouseover和mouseenter的不同之處mouseover:在移入子元素的時候也會觸發,對應mouseoutmouseenter:移入當前元素會觸發，如果有子元素，則不會觸發,對應mouseleavehover():這個方法里面實質上就是使用mouseenter()和mouseleave()*/$('.div1').mouseover(function() {console.log('mouseover 進入');}).mouseout(function() {console.log('mouseout 離開');});$('.div3').mouseenter(function() {console.log('mouseenter 進入');}).mouseleave(function() {console.log('mouseleave 離開');});</script></body> </html>3.效果圖
1.div1綁定了mouseover(鼠標移入)與mouseout(鼠標移出)事件
(1)我們看一下后臺有什么輸出(大家把黑色的點當做鼠標的移動)
(2)第二步移動
(3)第三步移動
實驗證明，當移入div1的子元素div2的時候，觸發了mouseout事件，并且移入離開div2時會觸發mouseover與mouseout事件
2.div3綁定了mouseenter(鼠標移入)與mouseleave(鼠標移出)事件
(1)第一步移動
(2)第二步移動
(3)第三步移動
實驗證明，及時div4擁有子元素，在移入移出子元素的時候也不會觸發mouseenter和mouseleave事件
總結
以上是生活随笔為你收集整理的jQuery面试题-区别mouseover和mouseenter的不同之处(看了也许对你有好处)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： jQuery-全选、全不选、反选、提交等
- 下一篇： jsp页面怎么调用的servlet