java onmouseover_[Java教程]关于onmouseover和onmouseout的bug

[Java教程]关于onmouseover和onmouseout的bug

0 2016-11-01 23:02:52

总结了一下关于使用onmouseover以及onmouseout会出现的bug

首先简单的布局：

这是一个内容

简单写了一下样式，效果如下：

js代码如下：var oBox = document.getElementById("box");oBox.onmouseover = function(){ alert(“移入");}oBox.onmouseout = function(){ alert("移出");}

需要的效果是移入时alert(“移入")，移出时alert("移出");

然而会产生一个bug，当鼠标从灰色移动到粉色区域，或者从粉色移动到灰色区域的时候，仍然会触发onmouseover和onmouseout事件.

解决思路：判断来源，如果从盒子里面移动则不触发。

首先，要借助事件对象，对事件对象进行兼容处理：var oEvent = ev || event;

事件对象中有一个属性fromElemen，获得来源，但是也存在兼容问题，只适用于高级浏览器，在chrome和ie里有relatedTarget属性var oFrom = oEvent.fromElement || oEvent.relatedTarget

判断是是否在内部移动，是则直接return返回//判断是否包含if(oFrom && oBox.contains(oFrom)){ return; }

最后js代码如下：oBox.onmouseover = function(ev){ var oEvent = ev || event;//兼容处理 var oFrom = oEvent.fromElement || oEvent.relatedTarget;//兼容处理 //如果在里面则返回 if(oFrom && oBox.contains(oFrom)){ return; } alert("移入"); };

同理，onmoouseout的解决方法代码如下：oBox.onmouseout = function(ev){ var oEvent = ev || event; //处理兼容 var oTo = oEvent.toElement || oEvent.relatedTarget; //处理兼容 //如果在里面则返回 if(oTo && oBox.contains(oTo)){ return; } alert("移出"); };

关于兼容问题，ev属于高级浏览器，event属于ie

relatedTarget属于高级浏览器，fromElement和toElement属于chrome和ie

最后介绍一种简便方法，onmouseenter事件和onmouseleave事件以及可以解决以上问题，使用方法相同。

本文网址：http://www.shaoqun.com/a/261896.html

*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：admin@shaoqun.com。

seo

0