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;
                width:800px;
                height:30px;
                background:gray;
                margin:20px;
        }
        .menu li{
            width: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>