MouseOut/MouseOver/RollOut/RollOver事件比照

最新推荐文章于 2016-05-04 16:30:02 发布
最新推荐文章于 2016-05-04 16:30:02 发布
阅读量97 收藏
点赞数

最近要做一个Flex的PropertyGrid，展示属性的方式并没有采用传统的PropertyGird的展示方法，但是主要的用户行为还是需要与传统的PropertyGrid一致的。

PropertyGrid分为两种状态"悬浮"和"内嵌"。状态为悬浮时，鼠标移动到Property MINI选项卡的时候，弹出PropertyGrid主窗体，隐藏MINI选项卡；鼠标移出PropertyGrid主窗体的时候，该窗口关闭，同时显示MINI选项卡。

很习惯的选择了MouseOut事件，即给PropertyGird注册MouseOut事件，当鼠标移出时关闭PropertyGrid。但是经过测试发现，使用该事件时，即使鼠标未移出PropertyGrid，窗口也会关闭。最后不得不写个程序测试下，结果发现，如果PropertyGrid里面含有其他控件，鼠标在这些控件上移动时也会触发MouseOut和MouseOver事件，造成之前逻辑错误。

如果采用RollOut和RollOver事件则不会出现逻辑问题。

区别在于：RollOver和RollOut事件只有鼠标移入移出监听该事件的组件时才会触发，而移入移出其子组件的时候不会触发。MouseOver和MouseOut事件是鼠标移入移出监听该事件的组件以及子组件的时候时触发。

测试代码请见Flash View Source。

测试结果请见Flash。鼠标在面板中移动，DataGrid会显示事件信息。

Flash 链接：http://files.cnblogs.com/jingtao/OnMouseOutTest.rar

 

原创文章，转载请注明出处！
All CopyRight Reserved ！

主页：http://jingtao.cnblogs.com

QQ:307073463
Email:jingtaodeemail@qq.com
MSN:sunjingtao@live.com

weixin_34342992
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【Flash开发】mouseOver与rollOver的区别
weixin_30244681的博客
11-13 119
MouseEvent的mouseOver事件和rollOver事件是一个使用率很高的事件，它们都是对光标是否在可交互对象上进行判断，然而它们也存在一些区别。 mouseOver的触发机制： 当鼠标移到可交互对象实例上时调度，而且当鼠标进入显示对象容器的任何可交互对象的子对象区域时都会调度。 rollOver的触发机制： 当鼠标进入某个显示对象区域或者...
RollOver和MouseOver的区别
joe_feng的博客
03-20 165
共同点：都是针对鼠标的进入和进出事件。 不同点： 1、如果对一个容器添加Button，那么RollOVer和RollOut事件只有在移入或移出容器的时候才触发，移入或移出Button上时不会执行RollOVer或RollOut事件。   2、RollOVer和RollOut不会执行冒泡事件，MouseOver和MouseOut会执行冒泡事件。...
mouseOver 和rollOver区别
AS3 游戏开发
05-14 4780
mouseOver的bubbles是true，rollOver的bubbles是false。 两者的区别，其实要在侦听MOUSE_OUT事件时，变得很明显。 假如一个Canvas中间包含一个Button，比较侦听canvas的MOUSE_OUT和ROLL_OUT事件： 1.canvas.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHand
mouseOver 和rollOver区别
lanyanai的专栏
10-14 610
mouseOver的bubbles是true，rollOver的bubbles是false。 两者的区别，其实要在侦听MOUSE_OUT事件时，变得很明显。 假如一个Canvas中间包含一个Button，比较侦听canvas的MOUSE_OUT和ROLL_OUT事件： 1.canvas.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler
rollOut 、rollOver 和mouseOut 、mouseOver 事件的区别
gaopeng62524的专栏
07-01 1090
单独给一个控件或者一个没有孩子的容器添加这两个事件，运行起来没什么区别。区别在于给有孩子的容器添加这些事件的时候就不一样了。rollOut 、rollOver 在什么时候被调用呢？当你给一个有孩子的容器添加rollOut 、rollOver 事件后，当鼠标设备移动到这个容器内部区域时（内部区域包括该容器和该容器孩子区域上）触发rollOver事件，离开该容器触发rollOut事件（离
经过绑定元素时会多次触发mouseover和mouseout事件
09-04
经过绑定元素时会多次触发mouseover和mouseout事件，针对这个问题，下面有个不错的解决方法
基于mouseout和mouseover等类似事件的冒泡问题解决方法
09-04
主要介绍了关于mouseout和mouseover等类似事件的冒泡问题解决方法。需要的朋友可以过来参考下，希望对大家有所帮助
鼠标经过子元素触发mouseout，mouseover事件的解决方案
09-03
标题提到的问题是，当鼠标经过子元素时，意外触发了父元素的`mouseout`和`mouseover`事件，从而影响了预期的效果。下面将详细讨论这个问题以及解决方案。 首先，我们需要了解`mouseover`和`mouseout`事件的工作原理...
MouseOver事件与RollOver事件差别
哎咿呀
12-09 1102
曾经对这两个事件之间的差别比较迷惑，这不是差不多嘛，有区别么？后来写了一个Demo测试，就发现之间的不同之处。 显而易见，实践是检验真理的唯一标准！！！ mouse事件与roll事件的区别在于如下两点： 1、鼠标在母组件与子组件上移入移出时是否调度的区别； 2、mouse事件具有冒泡阶段而roll事件没有，决定了在子组件调度事件时母组件是否能监听到的区别。 总之，
rollOut 事件与mouseout事件的区别
xiaoniba1024的专栏
12-19 682
rollOut 事件rollOut 事件 用户将指针设备从 InteractiveObject 实例上移开时调度。事件目标是指先前在指针设备下的对象或该对象的父级。relatedObject 是将指针设备向其移动的对象。在该对象的父级链以上连续分派 rollOut 事件，以该对象为开头，并以除 relatedObject 的根或始祖之外的最高级别的父级结束。 rollOut 事件的目的是简化
鼠标事件的mouseOver,rollOver,mouseOut,rollOut
wyr0924的专栏
11-21 1069
import flash.events.Event; /*outt.addEventListener(MouseEvent.ROLL_OVER,onOver); outt.addEventListener(MouseEvent.ROLL_OUT,onOut);*/ outt.addEventListener(MouseEvent.MOUSE_OVER,onOver); outt.addEvent
优雅的图片翻转实现方式rollover.js
新的启程的博客
05-04 1606
html<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <style type="text/css"> img{ width:100px;
Flex MouseOut与RollOut，MouseOver与RollOver
忘记喧嚣的专栏
04-13 2381
<br />这两类事件看起来是一样的，都是在鼠标经过组件时触发这个事件，但是如果要是真的一样的话，又不可能搞两个这样的，因此它们还是有些区别的，区别的地方就在于如果一个组件包含了另外一个组件，<br /> <br />例如一个Canvas中包含一个按钮，<br /> <br />那么ROLL_OVER和ROLL_OUT事件只会在移入或移出Canvas时触发，<br /> <br />而在Canvas里的Button上时，ROLL_OVER和ROLL_OUT是不会触发的，而是触发MOUSE_OVER和MOUS
基于springboot开发的在线家具商城设计与实现vue+mysql+论文（毕业设计）.zip
最新发布
06-26
本项目是一套基于springboot开发的在线家具商城设计与实现vue+mysql+论文（毕业设计）.zip，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的Java学习者。包含：项目源码、数据库脚本、项目说明等，有论文参考，该项目可以直接作为毕设使用。 功能概述：该在线家具商城系统实现了商品浏览、购物车管理、订单处理等核心电商功能，同时提供了后台管理界面以便商家管理商品信息和订单数据。用户友好的前端界面结合了Vue技术，确保良好的用户体验。 技术实现：后台框架使用了SpringBoot，以其简化部署和独立运行的特点，为后端服务提供稳定基础。数据库采用MySQL，存储商品、用户信息及订单数据，确保数据的持久性和一致性。开发环境包括JDK、IDEA和Tomcat，这些工具支持了从开发到部署的全过程。项目都经过严格调试，确保可以运行！如果基础还行，可以在此代码基础之上做改动以实现更多功能。
JS中mouseout，mouseover和mouseenter，mouseleave的区别
05-25
此外，`mouseenter`和`mouseleave`事件只在鼠标进入或离开一个元素的边界时触发，而`mouseover`和`mouseout`事件在鼠标经过元素内部时也会触发。 因此，如果你想在鼠标进入或离开一个元素时触发事件，并且不希望...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值