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

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

Java 并发/多线程教程(四)-并发模型
本系列译自jakob jenkov的Java并发多线程教程(本章节部分内容参考http://ifeve.com/并发编程模型),个人觉得很有收获.由于个人水平有限,不对之处还望矫正! 并发系统可以有多 ...
Java 并发/多线程教程(五)-相同线程
本系列译自jakob jenkov的Java并发多线程教程,个人觉得很有收获.由于个人水平有限,不对之处还望矫正! 相同线程是一并发框架模型,是一个单线程系统向外扩展成多个单线程的系统.这样的结果就是 ...
Windows下Libvirt Java API使用教程(二)- 接口使用说明
介绍完libvirt Java API的部署工作: <Windows下Libvirt Java API使用教程(一)- 开发环境部署> 接下来我们就介绍一下接口的使用和代码样例. libv ...
Java NIO系列教程（十二） Java NIO与IO
原文地址:http://tutorials.jenkov.com/java-nio/nio-vs-io.html 作者:Jakob Jenkov 译者:郭蕾校对:方腾飞当学习了Java ...
Windows下Libvirt Java API使用教程(三)- TLS认证访问和动态链接文件依赖
之前已经介绍过了libvirt api的上手使用方式: <Windows下Libvirt Java API使用教程(二)- 接口使用说明> <Windows下Libvirt Java ...
Java Servlet完全教程
本文来自Java Servlet完全教程 Servlet 是一些遵从Java Servlet API的Java类,这些Java类可以响应请求.尽管Servlet可以响应任意类型的请求,但是它们使用最广 ...
Java NIO系列教程（三） Buffer
2019独角兽企业重金招聘Python工程师标准>>> Java NIO中的Buffer用于和NIO通道进行交互.如你所知,数据是从通道读入缓冲区,从缓冲区写入到通道中的. 缓冲区本 ...
Hyperledger Fabric Java SDK最新教程
Fabric Java SDK是Fabric区块链官方提供的用于Java应用开发的SDK,全称为Fabric-sdk-java,网上可用资料不多,本文列出了精心整理的针对Fabric Java SDK ...
Java NIO系列教程（五）通道之间的数据传输
在Java NIO中,如果两个通道中有一个是FileChannel,那你可以直接将数据从一个channel(译者注:channel中文常译作通道)传输到另外一个channel. transferFro ...

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

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

最新文章

热门文章