日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 >

jQuery面试题-区别mouseover和mouseenter的不同之处(看了也许对你有好处)

發布時間：2025/3/21 40 豆豆
生活随笔 收集整理的這篇文章主要介紹了 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的不同之处(看了也许对你有好处)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。