您的位置：首页 > Web前端 > HTML

解决html中内部元素mouse事件干扰

2013-05-03 15:03 519 查看

问题:onmouseover onmouseout事件在有内部元素的div上面使用的时候经常出现问题，移动到内部元素的瞬间会执行外部div的onmouseout事件然后再执行内部元素和外部元素的　　　　　 onmouseover事件

解决办法：

　　1.用hover方法代替onmouseover和onmouseout方法：hover([over,]out)鼠标进入对象执行【over】，鼠标移除执行【out】，方法内部判断了是否一致在对象上

　　　　

<script type="text/javascript">
$(function(){
$("#1").hover(
function(){
console.info($("#1").attr("id"));
},
function(){
console.info($("#1"));
}
);
})

</script>
</head>
<body><!-- onmousemove="oo(this);" onmouseout="oo1(this);" -->
<div  id="1">
<table>
<tr><td>12313</td><td>范德萨</td></tr>
<tr><td>哈过分的话</td><td>黑钢飞刀</td></tr>
<tr><td>均衡发展</td><td>均衡发展</td></tr>
</table>
</div>
</body>

　　2.因为干扰产生的主要原因是鼠标在移进内部元素的瞬间会激发外部元素的onmouseout事件，再先后激发内部元素和外部元素的onmouseover事件，所以可以让鼠标移出元素要执行　　　　的方法在规定的一个很小(<1s)的时间内执行，再在onmouseover事件中clearTimeout(t)消除要执行的东东，这样就只执行了onmouseover事件，干扰效果也看不出来，例：

　　

<script type="text/javascript">
var t;
　　　//鼠标移入执行
function oo(btn){
　　　　 //清除移动到边界要执行的方法
clearTimeout(t);
console.info($(btn).attr("id"));
}
　　 //移出执行
function oo1(btn){
　　　　　//延后1ms执行
t = setTimeout(function(){
console.info($(btn))
},1);

}
</script>
</head>
<body>
<div id="1" onmousemove="oo(this);" onmouseout="oo1(this);">
<tr><td>12313</td><td>范德萨</td></tr>
<tr><td>哈过分的话</td><td>黑钢飞刀</td></tr>
<tr><td>均衡发展</td><td>均衡发展</td></tr>
</table>
</div>
</body>

　　3.contains方法（没试过）

在onmouseover时先进行如下判断，结果为true时再执行方法体：
if(!this.contains(event.fromElement)){MouseOverFunc()}
在onmouseout时先进行如下判断，结果为true时再执行方法体：
if(!this.contains(event.toElement)){MouseOutFunc()}
下面来解释一下上面两行代码的含义：
在IE中，所有的HTML元素都有一个contains方法，它的作用是判断当前元素内部是否包含指定的元素。我们利用这个方法来判断外层元素的事件是不是因为内部元素而被触发，如果内部元素导致了不需要的事件被触发，那我们就忽略这个事件。
event.fromElement指向触发onmouseover和onmouseout事件时鼠标离开的元素；event.toElement指向触发onmouseover和onmouseout事件时鼠标进入的元素。
那么上面两行代码的含义就分别是：
○ 当触发onmouseover事件时，判断鼠标离开的元素是否是当前元素的内部元素，如果是，忽略此事件；
○ 当触发onmouseout事件时，判断鼠标进入的元素是否是当前元素的内部元素，如果是，忽略此事件；
这样，内部元素就不会干扰外层元素的onmouseover和onmouseout事件了。
但问题又来了，非IE的浏览器并不支持contains函数，不过既然我们已经知道了contains函数的作用，就可以自行添加如下的代码来为非IE浏览器增加contains支持：
if(typeof(HTMLElement) != "undefined")
{
HTMLElement.prototype.contains = function(obj)
{
while(obj != null &&  typeof(obj.tagName) != "undefind")
{
if(obj == this)
Return true;
Obj = obj.parentNode;
}
return false;
};
}

引用博客：http://www.cnblogs.com/xiaoshatian/archive/2008/03/28/1127377.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航