mouseover事件与mouseenter事件
来源:互联网 发布:剑3唐门成男捏脸数据 编辑:程序博客网 时间:2024/04/28 04:57
对于 mouseover 和mouseenter 两个事件 最大的区别就是 mouseenter 是 不冒泡的事件 ..这话怎么理解呢?
<div id=="parent">
<div id="child"></div>
</div>
对于mouseover 时间来说 当鼠标从其他元素 移动到 child节点时发生 但此事件会冒泡 所以会导致 parent 也出发mouseover
如果我们对 parent注册了 mouseover监听. 则可能会产生一个什么问题呢? 从 parent移动到child 同样出发parent的mouseover 有时候我们不希望这样的事情发生. 这时候 如果注册的监听 是mouseenter的话 无论鼠标从任何元素 移动到child时 只有child元素 发生mouseenter事件 而其祖宗节点 都不会因为冒泡 而触发此事件.
不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。对应mouseout
只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。对应mouseleave这样的话,mouseenter子元素不会反复触发事件,否则在IE中经常有闪烁情况发生。
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> x=0; y=0; $(document).ready(function(){ $("div.over").mouseover(function(){ $(".over span").text(x+=1); }); $("div.enter").mouseenter(function(){ $(".enter span").text(y+=1); }); }); </script> </head> <body> <p>不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。</p> <p>只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。</p> <div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left"> <h2 style="background-color:white;">被触发的 Mouseover 事件:<span></span></h2> </div> <div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right"> <h2 style="background-color:white;">被触发的 Mouseenter 事件:<span></span></h2> </div> </body> </html>
0 0
- mouseover事件与mouseenter事件
- mouseover事件与mouseenter事件的区别
- mouseover事件与mouseenter事件的区别
- mouseover事件与mouseenter事件的区别
- mouseover事件与mouseenter事件的区别
- JS事件分析之mouseover事件与mouseenter事件?
- mouseover 事件和mouseenter 事件的不同
- 事件mouseover/out和mouseenter/leave
- jQuery 事件:MouseOver/MouseOut vs MouseEnter/MouseLeave
- JavaScript事件mouseover和mouseenter的区别
- 鼠标事件mousemove、mouseover、mouseout、mouseenter、mouseleave
- jQuery中mouseover和mouseenter事件的区别
- 关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
- 对mouseout/mouseleave,mouseover/mouseenter事件的解析
- mouseenter 与 mouseover 的不同
- mouseenter与mouseover的区别
- jquery优化基本事件--mouseenter、mouseleave和mouseover、mouseout事件的区别
- MouseOver事件与RollOver事件差别
- MongoDB学习之旅二十四:MongoDB Replica Sets 增加节点
- [Android初级]实现简单的画图板
- ios7.1发布企业证书测试包的问题
- u-boot源码配置原理分析
- 宽屏透明html5产品展示模板
- mouseover事件与mouseenter事件
- 黑马程序员——交通灯管理系统学习总结
- 本文介绍在Wireshark网络协议分析仪中如果解密SSL和TLS流量
- hdu1978(记忆化搜索/DP)
- C语言基础——new/delete与malloc/free比较
- linux下查看系统资源和负载,以及性能监控
- git 使用
- Linux查看版本当前操作系统信息
- Linux 常用快捷键