jquery如何阻止子元素相应mouseout事件
jquery如何阻止子元素相应mouseout事件:
mouseout有一个特点,当鼠标移入子元素的时候,也会触发此事件,但是在实际应用中这个特点往往不是我们想要的,下面就通过代码实例介绍一下如何实现此效果,代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> #father {width:100px;height:100px;background:red; } #inner {width:50px;height:50px;background:green; } </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){$("#father").mouseout(function(e){ evt = window.event||e; var obj=evt.toElement||evt.relatedTarget; var pa=this; if(pa.contains(obj)) return false; $(this).hide(); }); }) </script> </head> <body> <div id="father"><div id="inner"></div> </div> </body> </html>
以上代码实现了我们的要求,当鼠标指针移入子div的时候,不会触发事件,但是当鼠标移出父div的时候会触发事件,下面接扫一下实现此效果的过程。
一.实现原理:
原理非常的简单,就是判断当鼠标指针移动的时候,判断与事件的目标节点相关的节点是否是子元素,如果是子元素,则不触发事件,如果不是子元素则触发事件。
二.相关阅读:
1.mouseout事件可以参阅jQuery的mouseout事件一章节。
2.evt = window.event||e可以参阅var ev=window.event||ev的作用是什么一章节。
3.toElement属性可以参阅javascript的toElement事件属性一章节。
4.relatedTarget属性可以参阅javascript的relatedTarget事件属性一章节。
5.this可以参阅javascript的this用法详解一章节。
6.contains()函数可以参阅jQuery.contains()方法一章节。
7.hide()函数可以参阅jQuery的hide()方法一章节。
转载于:https://www.cnblogs.com/refe/p/5122755.html
jquery如何阻止子元素相应mouseout事件相关推荐
- jquery如何阻止子元素继承父元素的事件(又称事件冒泡)
非常简单,子元素上添加如下代码即可 1 $('a').click(function(e){ 2 e.stopPropagation(); 3 }); 老版本为event,现在用e就行 转载于:http ...
- js阻止子元素事件_JS阻止冒泡和取消默认事件(默认行为)-前端开发博客
js冒泡和捕获是事件的两种行为,使用event.stopPropagation()起到阻止捕获和冒泡阶段中当前事件的进一步传播.使用event.preventDefault()可以取消默认事件.对于冒 ...
- js 捕获子元素的 focus 事件
focus 事件可以绑定任何元素,但只有可编辑元素才可以触发 focus 事件.且 focus 事件不会冒泡. 所以不能在父元素监听子元素的 focus 事件. focusin 事件与 focus 一 ...
- React 解决鼠标移入子元素触发父元素的mouseout事件
方法一. 用mouseleave/mouseenter代替mouseover/mouseout[最佳方法] mouseover 与 mouseenter: mouseover => 不论鼠标指针 ...
- 解决鼠标移入子元素触发父元素的mouseout事件
方法一. 用mouseleave/mouseenter代替mouseover/mouseout[最佳方法] mouseover 与 mouseenter: mouseover => 不论鼠标指针 ...
- js阻止子元素事件_阻止 JS 的冒泡事件
用了一段时间google inbox,赶脚mail task的样式很酷炫,于是也模仿着做了一个task管理系统. Google task有个behavior是点击页面别处,当前展开的mail就会收起. ...
- 关于移动端 触摸事件导致子元素不能绑定事件
近期项目遇到一个问题, 找了一个插件 叫做 移动端按首字母检索城市列表 http://www.sucaihuo.com/js/2305.html 在城市选项这里发现绑定不上事件 找了很多阻止冒泡的事件 ...
- jQuery动态生成的元素如何绑定事件
这段时间在写代码的时候遇到一个问题,通过append()添加的节点,点击事件不起作用.当时我百思不得其解,各种找错都没找到错误的原因.后来才发现是动态生成节点的问题,还是自己没有经验啊. 下面来 ...
- 如何阻止子元素触发父元素的事件
https://www.jianshu.com/p/e8599da7c69d 转载于:https://www.cnblogs.com/bydzhangxiaowei/p/9102285.html
- html中绑定hover事件,jQuery中多个元素的Hover事件解决方案
1.需求简介 jQuery的hover事件只是针对单个HTML元素,例如: $('#login').hover(fun2, fun2); 当鼠标进入#login元素时调用fun1函数,离开时则调用fu ...
最新文章
- 浅析个人网站建设需要注重的建设问题
- CodeForces 679B Bear and Tower of Cubes
- 进位赛迪百强榜,雨花区的“高质量”发展底座有多坚实?
- python从入门到精通pdf-跟老齐学Python从入门到精通完整版PDF_Python教程
- 记一次DNS运维排错
- LINUX下用select实现串口通讯示例
- 什么是序列化?序列化的作用是什么?iOS中怎么实现序列化?
- ldap 测试表设计
- 提升C4D工作效率的30个快捷键
- 苹果7pnfc功能门禁卡_苹果手机怎么刷门禁卡?iPhone刷门禁卡的设置方法
- 视觉三维重建:colmap从理论到实战
- 小米手环5表盘bin文件解包修改
- 浏览器主页被篡改劫持怎么办
- Salesforce chatter:userPhotoUpload Component 使用
- 【零基础系列】K-Means聚类算法
- vue获取浏览器的指纹码
- Gartner 魔力象限
- labelme 批量转换json文件 详细步骤
- 大型桥梁结构健康监测系统之GNSS位移监测系统
- oracle crs 4563,重启机器后,节点2无法启动crs,Oracle你生产的RAC为何如此的脆弱,有图有真相。求解...