jQuery细节总结
1、mouseover和mouseenter 区别
mouseenter指鼠标进入元素时触发,鼠标在元素子元素上不触发。
mouseover指鼠标进入元素时触发,在元素进入子元素会触发。
在此引用一个例子
1 <body> 2 3 <p>不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。</p> 4 <p>只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。</p> 5 <div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left"> 6 <h2 style="background-color:white;">被触发的 Mouseover 事件:<span></span></h2> 7 </div> 8 <div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right"> 9 <h2 style="background-color:white;">被触发的 Mouseenter 事件:<span></span></h2> 10 </div> 11 <script type="text/javascript"> 12 x=0; 13 y=0; 14 $(document).ready(function(){ 15 $("div.over").mouseover(function(){ 16 $(".over span").text(x+=1); 17 }); 18 $("div.enter").mouseenter(function(){ 19 $(".enter span").text(y+=1); 20 }); 21 }); 22 </script> 23 </body>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 《HelloGitHub》第 106 期
· 数据库服务器 SQL Server 版本升级公告
· 深入理解Mybatis分库分表执行原理
· 使用 Dify + LLM 构建精确任务处理应用