Actionscript 3 中实现类似JQuery的mouseleave和mouseenter事件
October/15th 2010

    最近在搞flash的东西。遇到一个事件冒泡带来的问题。类似Javascript,flash里面的元素也有事件冒泡机制。经常会遇到给一个外层的元素绑定一个mouse_over事件,本意是想实现进入这个外层的元素的时候触发。但是实现的时候却有很奇怪的表现:鼠标在这个元素内部移动的时候,遇到这个元素北部的元素的时候,内部元素触发mouse_over,这个事件会冒泡到外层这个元素,同样触发外层元素的mouse_over事件! 然后你就会发现,鼠标在这个外层元素内部移动的时候,绑定的事件会被触发很多次。

    为了解决这个问题,JQuery自己实现了mouseenter和mouseleave事件,实现鼠标移入这个元素内部和离开这个元素的时候触发,鼠标在元素内部移动不会触发。原理我就不详细说了,大概是判断触发的对象与绑定事件的对象之间的关系吧。  

    在flash里面我自己实现了一个类似的东西,实现了mouseenter和mouseleave的响应。 大概原理是利用mouseover和mouseout的关系(在元素内部移动鼠标到内部的其他元素上的时候,会先触发mouseout,然后触发mouseover事件),把mouseout事件延后处理,然后看如果mouseover到了内部元素上,那就取消mouseout执行,否则触发mouseleave。呃。。。貌似很混乱。。。。核心思想就是利用setTimeout(function(){ },0); 把函数延后执行。

as代码:

function mouseEnterLeave(red,enterCall,leaveCall)
{
	red.mouseOvering = false; //标记鼠标是否处在元素内部
	red.addEventListener(MouseEvent.MOUSE_OVER,function(e:MouseEvent)
	{
		var ct = e.currentTarget;
		try{ clearTimeout(ct.outTimer); }catch(e:Error){ }
		if (!ct.mouseOvering) //如果从外面到里面,那么触发mouseEnter
		{
			enterCall.call(red);
		}
		ct.mouseOvering = true;
	});
	
	red.addEventListener(MouseEvent.MOUSE_OUT,function(e:MouseEvent)
	{	
		var ct = e.currentTarget;
		ct.outTimer = setTimeout(function()
		{ //把mouseout响应延后执行,如果能执行,那么表示鼠标移出
			ct.mouseOvering = false;
			leaveCall.call(red);
		},0);
	});
}

 

    当然,这个函数也可以在Javascript中实现。就像这样:(非IE)

function mouseEnterLeave(o,enterCallback,leaveCallback)
{
	o.addEventListener('mouseover',function(e)
	{
		try{ clearTimeout(o.outTimer); } catch(e) { }
		if (!o.overing)
		{
			if (typeof enterCallback == 'function') enterCallback.call(o);
		}
		o.overing = true;
	},false);
	o.addEventListener('mouseout',function(e)
	{
		o.outTimer = setTimeout(function()
		{
			o.overing = false;
			if (typeof leaveCallback == 'function') leaveCallback.call(o);
		},0);
	},false);
}

    Javascript的例子见这里(非IE浏览器)。



6259 read 3 comment(s)
#1
上海门禁   2010年10月16号 23:40       回复
哈哈,沙发.

你写的太专业了,只能能看懂一点点.
#2
smallwolf   2010年11月20号 18:14       回复
这个要是再把attachEvent放进去,就可以在所有浏览器下用了。IE太烦人了
#3
玩儿   2011年07月13号 14:58       回复
flash 有MouseEvent.ROLL_OVER 和MouseEvent.ROLL_OUT事件可以解决
添加新的评论
称呼:*
邮件:*
网站:
内容:

Copyright © Longbill 2008-2024 , Designed by EndTo , Powered by EndCMS