刘春龙的博客

    最近在搞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浏览器)。

6219 read 3 comment(s)