onmouseout,mouseover经过子元素也触发的问题解决方案
在mouseout与mouseover的冒泡问题上,相信有很多朋友都遇到过。今天这里就总结一下
关于mouseover和mouseout冒泡问题的解决方案:
首先,看下event.relatedTarget的用法。
relatedTarget
事件属性返回与事件的目标节点相关的节点。
relatedTarget不支持IE。对于 mouseover 事件来说,该属性是鼠标指针移到目标节点上时所离开的那个节点。
对于 mouseout 事件来说,该属性是离开目标时,鼠标指针进入的节点。
对于其他类型的事件来说,这个属性没有用。
<div id='but_temp'><a href='#'> 这里是文字 </a> <div> 第二方收复失地还 <br>sdfsjdlfsdjlfksdjlfksjdflk <br> <div> 第三层第三层第三层第三层第三层第三层 <br> 第三层第三层第三层第三层第三层第三层第三层 </div> <br> </div> </div>
var d1 = document.getElementById('but_temp'); d1.onmouseover = mouseover_x d1.onmouseout = mouseout_x function mouseover_x ( ae ){ var e = window.event || ae var s = e.fromElement || e.relatedTarget if( document.all ){ if( !(s == this || this.contains(s)) ){ alert("IE: 你in 了!"); } }else{ var res= this.compareDocumentPosition(s) if( !(s == this || res == 20 || res == 0 ) ){ alert("FF: 你in 了 !"); } } } function mouseout_x( ae ){
var e = window.event || ae; var s = e.toElement || e.relatedTarget; //var temp = document.getElementById('but_temp'); if(document.all){ if( !this.contains(s) ){ alert('IE: 你out 了'); } }else{ var res= this.compareDocumentPosition(s) if( ! ( res == 20 || res == 0) ){ alert('FF: 你out 了'); } } }
今天发现JQ中关于这个问题,已经有了一个好的解决办法了.呵呵,jquery中定义了一种事件叫做"mouseleave",用这个事件做事件句柄的话,就可以解决这个问题了.越来越发现jquery是个好东西了. 方案三:
<!DOCTYPE html>
<html>
<head>
<title>无标题页</title> <script type="text/javascript" src="http://sy.zgsapt.com/js/jquery-1.7.2.min.js"></script> <script type="text/javascript">
$(document).ready(function() {
$("#numd").bind("mouseleave", function() {
document.getElementById('keybored').style.display = 'none';
document.getElementById('Nm').blur();
}); $("#Nm").focus(function() {
document.getElementById('keybored').style.display = '';
}); });
</script> </head>
<body>
<ul>
<li>
<input />
<div>
</div>
</li>
</ul>
<input id="hid" type="text" value="" style="display: none" />
<span id="numd" style="border: 1px solid red; clear: both; display: inline-block; font: 800em;">
<input type="text" id="Nm" name="Nm" value="" />
<div style="display: none; border: 1px solid #A2B4C6; width: 150px; height: 400px;"
id="keybored">
<input type="button" value="1" onclick="document.getElementById('Nm').value+=this.value;" />
</div>
</span>
</body>
</html>
实现这种效果很简单了
onmouseout,mouseover经过子元素也触发的问题解决方案的更多相关文章
- JS子元素oumouseover触发父元素onmouseout
原文:JS子元素oumouseover触发父元素onmouseout JavaScript中,父元素包含子元素: 当父级设置onmouseover及onmouseout时,鼠标从父级移入子级,则触发父 ...
- js/jq 动态添加的元素不能触发绑定事件解决方案
<!-- Copyright 2017-10-27, Jachin QQ: 381558301 Email: 381558301@qq.com 请看看你们的版本并对号入座: jquery1.6版 ...
- 父容器利用opacity设置透明后,子元素跟着变透明的解决方案
背景半透明,子元素不透明的效果经常需要用到.通常对父容器使用opacity属性时,子元素也跟着变透明,所以不妨设置父容器的 background-color:rgba(r,g,b,x); 其中x取值从 ...
- JS点击子元素不触发父元素点击事件(js阻止冒泡)
js阻止冒泡 <html> <title></title> <head> <meta charset="utf-8"> ...
- html 子元素和父元素都监听了 click 事件,点击子元素时为何先触发的是父元素的 click 事件?
先上一段代码,点击子元素时先触发的是父元素的 click 事件 <html> <head> <script type="text/javascript" ...
- jquery如何阻止子元素相应mouseout事件
jquery如何阻止子元素相应mouseout事件:mouseout有一个特点,当鼠标移入子元素的时候,也会触发此事件,但是在实际应用中这个特点往往不是我们想要的,下面就通过代码实例介绍一下如何实现此 ...
- 给div设置background-color: rgba(0, 0, 0, 0.2)属性,并加了css3动画--opacity动画淡出动画,之后div子元素的字体会抖一下
问题:给div设置background-color: rgba(0, 0, 0, 0.2)属性,并加了css3动画--opacity动画淡出动画,之后div子元素的字体会抖一下: 解决:animati ...
- 【原创】解决鼠标经过子元素触发mouseout,mouseover事件的问题
关键词:父子元素关系 mouseout mouseover 事件 事件冒泡 初期代码: <!DOCTYPE html> <html> <head> < ...
- 父级元素绑定定mouseout和mouseover,移过子元素是都会触发
2019独角兽企业重金招聘Python工程师标准>>> mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. 只有在鼠标 ...
随机推荐
- 【剑指offer】面试题 2. 实现 Singleton 模式
面试题 2. 实现 Singleton 模式 题目:设计一个类,我们只能生成该类的一个实例. 单例模式:确保一个类只有一个实例,并提供了一个全局访问点. Java 实现 1.饿汉模式 //饿汉模式 p ...
- android studio偏好设置
1.主题设置,可以选择白色主题及黑色主题 2.代码字体大小 3.生成新的主题 主题命名 4.加入代码时,自动引用库 5.合作菜单生成菜码 6.命名空间设置 字段设置为大写,静态字段设置为小写 SDK设 ...
- 【PHPExcel实例】 php 导出 excel 实例
CREATE TABLE `person` ( `) DEFAULT NULL, `name` ) DEFAULT NULL, `birthday` date DEFAULT NULL ) ENGIN ...
- 提高sqlmap爆破效率
提高sqlmap爆破效率 sqlmap在注入成功后,会尝试获取数据库和表的结构.对于MSSQL.MySQL.SQLite之类数据库,sqlmap可以通过系统数据库.系统数据表获取数据库和表的结构.但 ...
- Redux-react connect 源码自己重写
import Counter from '../components/Counter'; import { increment, decrement, incrementIfOdd, incremen ...
- JZYZOJ1537 [haoi2014]贴海报
http://172.20.6.3/Problem_Show.asp?id=1537 用的方法叫作浮水法,实质是递归自下而上判断一个区间有没有覆盖,O(n^2)感觉也没有很实用. 前几年的haoi怎么 ...
- (原创)Stanford Machine Learning (by Andrew NG) --- (week 3) Logistic Regression & Regularization
coursera上面Andrew NG的Machine learning课程地址为:https://www.coursera.org/course/ml 我曾经使用Logistic Regressio ...
- HDU 4635 Strongly connected (2013多校4 1004 有向图的强连通分量)
Strongly connected Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Other ...
- 转载:ArcEngine二次开发界面基本设置
转自:https://blog.csdn.net/weixin_42032107/article/details/80644991 1. 在form窗体中添加菜单栏和状态栏控件 2. 添加li ...
- 【转】Points To Line
原文地址 Python+Arcpy操作Points(.shp)转换至Polyline(.shp),仔细研读Points To Line (Data Management)说明,参数说明如下: Inpu ...