JavaScript 原型自定义事件mouseenter mouseleave实现

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript 原型自定义事件mouseenter mouseleave实现相关的知识,希望对你有一定的参考价值。

(function(){
	function firstCommonAncestor(elm1, elm2){
		var p = elm1.up();
		while( !elm2.descendantOf(p) ){
			p = p.up();
		}
		return p;
	}
	function stopEvent(e){
		try{
			e.stop();
		}catch(ex){}
	}
	Event.observe(document, 'mouseout', function(e){
		var from = e.element();
		var to = e.relatedTarget;
		p = null;
		if ( !to || (from !== to && !to.descendantOf(from))) {
			/* mouseleave should bubble up until the to element because we have left all elements up to that one */
			var stopOn = null;
			if( to ){
				if( from.descendantOf(to) ){
					stopOn = to.childElements();
				}else{
					p = firstCommonAncestor(from, to);
					if( p && to.descendantOf(p) ){
						stopOn = p.childElements();
					}
				}
			}
			if( stopOn ){
				stopOn.invoke('observe', 'custom:mouseleave', stopEvent);
			}
			from.fire('custom:mouseleave');
			if( stopOn ){
				stopOn.invoke('stopObserving', 'custom:mouseleave', stopEvent);
			}
		}
		var p = null;
		if( to && !from.descendantOf(to)){
			/* mouseenter can bubble, no problem! */
			var stopOn = null;
			if( to.descendantOf(from)){
				stopOn = from.childElements();
			}else{
				// do first common ancestor's children, see below.
				p = firstCommonAncestor(to, from);
				stopOn = p.childElements();
			}
			if( stopOn ){
				stopOn.invoke('observe', 'custom:mouseenter', stopEvent);
			}
			to.fire('custom:mouseenter');
			if( stopOn ){
				stopOn.invoke('stopObserving', 'custom:mouseenter', stopEvent);
			}
		}
	});
})();

以上是关于JavaScript 原型自定义事件mouseenter mouseleave实现的主要内容,如果未能解决你的问题,请参考以下文章

如何在自定义原型方法中附加 socket.io 事件?

JavaScript之面向对象学习七(动态原型模式和寄生构造函数模式创建自定义类型)

javascript原型原型链神图

JavaScript高级 对象创建模式 object 对象字面量 工厂模式 自定义构造函数 构造函数+原型

详解javascript实现自定义事件

javascript自定义事件