鼠标事件的冒泡与捕获
来源:互联网 发布:知天命什么意思 编辑:程序博客网 时间:2024/05/20 17:39
需求
当鼠标划过导航栏中某一菜单项时,显示其完整子菜单;鼠标移动出该菜单项及其对应的子菜单时,延迟0.5s子菜单消失。
思路
首先,将子菜单#sub-menu设置为display:none;并且在菜单项及其子菜单项的工头父元素#nav上绑定事件:
var nav = $("#nav"); nav.bind("mouseover", function () { if (!nav.hasClass("show")) { nav.addClass("show"); } }); nav.bind("mouseout", function () { setTimeout(function () { nav.removeClass("show"); }, 500); });
其中,.show #sub-menu{display:block};
问题
当鼠标移动到菜单项时,子菜单显示;移出后,子菜单0.5s后消失。但是,当鼠标移动到子菜单中的某一子菜单项时,绑定在#nav上的鼠标移入、移出事件会重复触发,导致.show不停添加、删除。经过研究,是因为子菜单项的鼠标事件冒泡导致。
最终解决
Jquery有两个事件分别对应无冒泡的鼠标移入、移出:mouseenter和mouseleave。
修改代码:
var nav = $("#nav"); nav.bind("mouseenter", function () { if (!nav.hasClass("show")) { nav.addClass("show"); } }); nav.bind("mouseleave", function () { setTimeout(function () { nav.removeClass("show"); }, 400); });
总结
这次问题比较简单,其实可以不解决。但是我这是在模仿别人页面时发现的区别,所以为了保证功能一致,就搜索了一下解决办法。以后开发的时候也要注意事件发生在冒泡和捕获阶段时的区别。
阅读全文
0 0
- 鼠标事件的冒泡与捕获
- 事件的冒泡与捕获
- 事件捕获与冒泡
- 事件冒泡与事件捕获
- 事件捕获与事件冒泡
- 事件冒泡与事件捕获
- 事件捕获与事件冒泡
- 事件冒泡与事件捕获
- 事件捕获与事件冒泡
- 事件捕获与事件冒泡
- 事件冒泡与事件捕获
- 事件冒泡与事件捕获
- 事件冒泡与事件捕获
- 事件冒泡与事件捕获
- 事件冒泡与事件捕获
- 面试题-冒泡与捕获、事件委托、ie事件和dom模型事件、鼠标事件
- JS事件捕获与冒泡
- javascript事件冒泡与捕获
- 第2章 Linux 安装(操作演示)
- js(javascript)取得当前时间小时,分钟,秒 以及毫秒
- 安卓开发-百度地图-HelloBaiduMap
- test
- Python简单房地产应用程序
- 鼠标事件的冒泡与捕获
- webview与js的交互
- 写区块链技术文章阵地 简书,因简书有打赏
- 上课时间安排
- BZOJ 3670 动物园 (KMP)
- TP5开发前篇---缓存(Cache)
- live555之DESCRIBE
- java多线程
- ActiveMQ系列—ActiveMQ集群方案(上)(高性能方案)