css3-pointer-events

css3-pointer-events_demo

　　该demo定义了一个菜单，点击了一次之后就不能再点击，另外其中也用到了flex布局，可直接将代码复制运行即可

<html>
  <head>
    <meta name="generator"
    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <title></title>
	<meta charset="utf-8" />
	<style>
		*{
			margin:0px;
			padding:0px;
		}
		li{
			list-style:none;
		}
		.menu{
			display:flex;
				flex-flow: row nowrap;
				800px;
				height:30px;
				background:gray;
				margin:20px;
		}
		.menu li{
			20%;
			height:100%;
			margin-left:5px;
			background:green;
			text-align:center;
			color:#fff;
			line-height:30px;
			cursor:pointer;
			-moz-user-select:none;
		}
		.menu li:nth-child(1){
			margin:0px;
		}
		.menu li:hover{
				color:#fff;
				background:#f00;
		}
		.pointer{
			pointer-events:none;
		}
	</style>
  </head>
  <body>
	<ul class="menu">
		<li>首页</li>
		<li>产品中心</li>
		<li>新闻中心</li>
		<li>公司简介</li>
		<li>联系我们</li>
	</ul>
	<div id="divContent"></div>
	<script>
	var divContent=document.getElementById("divContent");
		document.getElementsByTagName("ul")[0].addEventListener("click",function(e){
			var currentObj=e.target;
			if(currentObj.tagName.toLowerCase()=="li"){
				var childList=document.getElementsByTagName("ul")[0].childNodes;
				for(var i=0;i<childList.length;i++){
					childList[i].className="";
				}
				currentObj.className=" pointer";
				divContent.innerHTML=currentObj.innerHTML;
				console.log(divContent.innerHTML);
			}
		})
	</script>
  </body>
</html>