移动到子容器上触发父容器mouseout事件解决办法
容器下包含a,select标签,鼠标移动到子容器下都会触发mouseout事件,文本内容,如这里列出来的则不会触发mouseout事件。
<div style="width:300px;height:200px;border:solid 1px black" onmouseout="alert('MOUSEOUT')"> 容器下包含a,select标签,鼠标移动到子容器下都会触发mouseout事件,文本内容,如这里列出来文字的则不会触发mouseout事件。<br />解决办法就是判断移动到的对象是否包含在父容器中,包含则不执行mouseout的代码块。 <select><option>1</option><option>2</option></select> <a href="#">Test</a> <div style="border:solid 1px #eee">abc</div> </div>
解决办法就是判断移动到的对象是否包含在父容器中,包含则不执行mouseout的代码块。
<script> function isInner(e,p) { var o = e.relatedTarget || e.toElement; //标准浏览器移动到的对象为事件的relatedTarget对象,IE为toElement if (!o) return true;//移动到option上为undefined,直接return true if (o == p || (p.contains && p.contains(o))) return true;//为容器本身,调用判断DOM对象是否有contains方法(部分低版本浏览器可能不包含这个方法),有调用contains判断是否包含移动到的这个容器 while (o = o.parentNode) if (o == p) return true;//标准浏览器没有contains方法,遍历父节点实现 return false; } </script> <div style="width:300px;height:200px;border:solid 1px black" onmouseout="if(!isInner(event,this))alert('MOUSEOUT')"> 解决办法就是判断移动到的对象是否包含在父容器中,包含则不执行mouseout的代码块。 <select><option>1</option><option>2</option></select> <a href="#">Test</a> <div style="border:solid 1px #eee">abc</div> </div>
加支付宝好友偷能量挖...
原创文章,转载请注明出处:移动到子容器上触发父容器mouseout事件解决办法