mouseevent tips

时间:2023-12-10 09:56:14

关于roll_over 和 mouse_over的区别,这篇文章说明的很清楚,http://zengrong.net/post/1105.htm

全文如下:

在MouseEvent中,ROLL_OVER和MOUSE_OVER、ROLL_OUT和MOUSE_OUT是两对比较相似的事件,它们有什么区别呢?AS3语言参考中是这样解释的:

rollOver 事件的目的是简化带有子级的显示对象容器的移开行为的编码。当鼠标进入某个显示对象区域或者从其子级以外的对象进入任何其子级区域时,该显示对象将分派 rollOver 事件。这种行为与 mouseOver 事件的行为不同,每次鼠标进入显示对象容器的任何子对象区域时都会分派此事件,即使鼠标已在显示对象容器的另一个子对象上也是如此。

解释得有些拗口,实际上简单说就是:ROLL_OVER事件无视子对象,只监听根对象的事件。

看了下面演示,就更清楚了。

源码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
package
{
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.text.TextField;
 
[SWF(width=350,height=400)]
public class SimpleSample9 extends Sprite
{
private var _spriteChild:Sprite;
private var _spriteParent:Sprite;
private var _tf:TextField;
private var _line:int=0;
 
public function SimpleSample9()
{
_spriteChild = new Sprite();
_spriteChild.name = 'child';
_spriteChild.graphics.beginFill(0x81ADF0);
_spriteChild.graphics.drawCircle(0, 0, 40);
_spriteChild.graphics.endFill();
 
_spriteParent = new Sprite();
_spriteParent.name = 'parent';
_spriteParent.graphics.beginFill(0x0000ff);
_spriteParent.graphics.drawCircle(0,0, 90);
_spriteParent.graphics.endFill();
 
_spriteParent.addChild(_spriteChild);
addChild(_spriteParent);
_spriteParent.x = stage.stageWidth/2;
_spriteParent.y = _spriteParent.height/2;
 
_tf = new TextField();
_tf.border = true;
_tf.width = stage.stageWidth;
_tf.height = stage.stageHeight-_spriteParent.y-_spriteParent.height/2;
_tf.y = stage.stageHeight - _tf.height;
addChild(_tf);
 
_spriteParent.addEventListener(MouseEvent.MOUSE_OVER, mouseHandler);
_spriteParent.addEventListener(MouseEvent.MOUSE_OUT, mouseHandler);
_spriteParent.addEventListener(MouseEvent.ROLL_OVER, mouseHandler);
_spriteParent.addEventListener(MouseEvent.ROLL_OUT, mouseHandler);
}
 
private function mouseHandler(evt:MouseEvent):void
{
_line++;
var __ctName:String = evt.currentTarget.name;
var __tName:String = evt.target.name;
var __rName:String = evt.relatedObject == null ? 'null' : evt.relatedObject.name;
_tf.text = _line.toString()+','+(evt.type+',currentTarget:'+__ctName+',target:'+__tName+',relatedObject:'+__rName+'\n') + _tf.text;
}
}
}

我自己的一点理解:

当鼠标在 大圆parent的范围内 移到 小圆child中 时,

大圆parent抛出mouse_out事件,小圆childe抛出mouse_over事件,而小圆抛出的事件通过冒泡又被大圆截获到!

大圆抛出的mouse_out事件的relatedObject的值是child

小圆抛出的mouse_over时间的relatedObject的值是parent

而如果只监听了roll_over事件时,当鼠标在 在 大圆parent的范围内 移到 小圆child中 时,是没有事件抛出的。

roll_over比mouse_over先抛出

mouse_out又比roll_out先抛出