<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>code.js.cn</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#menu{position:absolute;left:100px;border:1px solid #000;background:#eee;100px;height:200px;display:none;}
</style>
</head>
<body>
<button id="pop">弹出菜单</button>
<div id="menu">meunItem...</div>
</body>
<script type="text/javascript">
/*small tools*/
ldh={
$:function (el){
return typeof el=="string"?document.getElementById(el):el
},
on:function (el,type,fn){
el=this.$(el);
el.attachEvent?
el.attachEvent('on'+type,function(){fn.call(el,event)}):
el.addEventListener(type,fn,false);
return this
},
stopUp:function (e){
e=e||window.event;
e.stopPropagation&&e.stopPropagation();
e.cancelBubble = true;
},
onblur:function (el,fn){
el=this.$(el);
ldh.on(el,'click',function (e){ldh.stopUp(e)})
.on(document, 'click',function(e){fn.call(el,e)})
}};
/*apply*/
ldh.on('pop','click',function (e){
ldh.$('menu').style.display='block';
ldh.stopUp(e)}).onblur('menu',function (){
this.style.display='none';
})
</script>
</html>