js - 默认行为(案例：自定义右键菜单)

最新推荐文章于 2024-05-30 11:09:39 发布

不想掉头发的小猴子

最新推荐文章于 2024-05-30 11:09:39 发布

阅读量333

点赞数

文章标签： javascript css 前端

本文链接：https://blog.csdn.net/weixin_57135131/article/details/127796243

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            width: 100px;
            height: 100px;
            border:solid 1px;
            line-height: 18px;
            list-style: none;display: none;
            position: absolute;
        }
        ul>li:hover{
            background-color: aqua;   
        }
    </style>
</head>
<body>
    <!-- 
        默认行为，就是不用我们注册，它自己就存在的事情
        - 比如我们点击鼠标右键的时候，会自动弹出一个菜单
        - 比如我们点击 a 标签的时候，我们不需要注册点击事件，他自己就会跳转页面

        阻止浏览器默认行为
        1. 标准浏览器： event.preventDefault()
        2. IE浏览器： event.returnValue = false
        3. 兼容：function preventDefault(evt){
                    var e = evt || window.event;
                    e.preventDefault ? e.preventDefault() : e.returnValue = false;
                }
        4. return false : 既阻止默认行为，也阻止事件冒泡！
     -->
     <!-- 自定义右键菜单 -->
     <ul id="list">
        <li>111</li>
        <li>222</li>
        <li>333</li>
     </ul>
     <script>
        var list = document.querySelector('#list')
        document.addEventListener('contextmenu',function(evt){
            evt.preventDefault()
            list.style.display = 'block';
            var x = evt.clientX;
            var y = evt.clientY;
            if(x >= document.documentElement.clientWidth - list.offsetWidth){
                x= document.documentElement.clientWidth - list.offsetWidth;
            }
            if(y >= document.documentElement.clientHeight - list.offsetHeight){
                y= document.documentElement.clientHeight - list.offsetHeight;
            }
            list.style.left = x + 'px';
            list.style.top = y + 'px';
        })
        document.addEventListener('click',function(){
            list.style.display='none';
        })
     </script>
</body>
</html>