(day13）右击菜单事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
             ul{
                width: 50px;
                list-style: none;
                position: absolute;//要加定位，不然ul不会动
                display: none;
            }
            ul li{
                background-color: pink;
                border: #00FFFF solid 1px;
                text-align: center;    
            }
        </style>
    </head>
    <body>
            <ul>
                <li>开始</li>
                <li>新建</li>
                <li>帮助</li>
                <li>工具</li>
                <li>打开</li>
            </ul>
        <script >
            var iul=document.querySelector("ul")//要与querySelectAll区分
            document.oncontextmenu=function(){
                var e=e ||window.event
                iul.style.left=e.pageX+"px";
                iul.style.top=e.pageY+"px";
                iul.style.display="block"
                return false//事件处理函数会取消事件，不再继续向下执行
            }
            iul.onmouseover=function(){
                var e=e ||window.event
                var ele=e.target
                if(ele.nodeName!="LI"){
                    return
                }                
                for(var i=0;i<this.children.length;i++){
                    this.children[i].style.backgroundColor=""
                }
                ele.style.backgroundColor="yellow"
            }
            iul.onclick=function(){
                var e=e ||window.event
                var ele=e.target||e.srcElement//兼容ie
                if(ele.nodeName!="LI"){
                    return
                }
                this.style.display="none"
            }
        </script>

posted @ 2022-06-08 23:33  前端养成记  阅读(56)  评论(0)    收藏  举报