Js-右键事件 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标右键事件</title>
    <style>
        *{margin:0px;padding:0px;list-style:none;}

        #uls{
            width:130px;
            height:auto;
            border:solid 1px #333;
            display:none;
            position:absolute;
        }

        #uls a{
            text-decoration:none;
            line-height:30px;
            text-align:center;
            display:block;
        }

        #uls li{
            width:130px;
            height:30px;
            border:solid 1px #eee;

        }


    </style>
</head>
<body>

    <ul id='uls'>
        <li><a href="">军事</a></li>
        <li><a href="">科技</a></li>
        <li><a href="">美女</a></li>
        <li><a href="">生活</a></li>
        <li><a href="">体育</a></li>
    </ul>


    <script>
    
    var uls = document.getElementById('uls');

    var lis = document.getElementsByTagName('li');


    window.oncontextmenu = function(e)
    {
        //获取x和y坐标
        var x = e.clientX;
        var y = e.clientY;

        // console.log(x,y);
        uls.style.left = x+'px';
        uls.style.top = y+'px';

        uls.style.display = 'block';


        return false;

    }

    for (var i = 0; i < lis.length; i++) {
        //鼠标移上去
        lis[i].onmouseover = function(){

            this.style.background='#ddd';
            var as = this.children;

            for (var i = 0; i < as.length; i++) {
                as[i].style.color = 'red';
            }

        }

        //鼠标移出来
        lis[i].onmouseout = function(){

            this.style.background=null;

            var as = this.children;

            for (var i = 0; i < as.length; i++) {
                as[i].style.color = '';
            }

        }
    }

    window.onclick = function(){

        uls.style.display = 'none';
    }

    </script>
</body>
</html>

 

posted @ 2018-01-04 20:24  葫芦七娃  阅读(2276)  评论(0)  编辑  收藏  举报