Js-右键事件

最新推荐文章于 2023-08-29 14:07:43 发布

weixin_30248399

最新推荐文章于 2023-08-29 14:07:43 发布

阅读量62

点赞数

原文链接：http://www.cnblogs.com/yuxiang-qiwa/p/8195726.html

版权

<!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>

转载于:https://www.cnblogs.com/yuxiang-qiwa/p/8195726.html

weixin_30248399

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Js-右键事件

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

扫一扫