<!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>
        html,body{
            height: 100%;
            width: 100%;
        }

        .contextmenu{
            position: fixed;
            top: 0;
            left: 0;
            z-index: 999;
        }

        .contextmenu ul{
            box-sizing: border-box;
            width: 150px;
            border: 1px solid #AAA;;
        }

        .contextmenu ul li{
            height: 30px;
            line-height: 30px;
            padding:  0 5px;
            cursor: pointer;
        }

        .contextmenu ul li:hover{
            background: lightblue;
        }


        .box{
            margin: 1500px auto;
            width: 100px;
            height: 100px;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    
    <!-- <div class="contextmenu">
        <ul>
            <li>跳转到首页</li>
            <li>进入详情</li>
            <li>逗你玩</li>
        </ul>
    </div> -->


    <!-- <a href="#box" id="link">哈哈</a> 
    <div class="box" id="box"> </div> -->


      <!-- 1 阻止默认行为 -->
    <a href="javascript:;"  >哈哈</a>  
    <a href="https://www.baidu.com/" id="link">哈哈</a>  


 
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
        /**
         *  默认行为: 
         *      
         *   可以基于 ev.prevetDefault() 来禁用默认行为
        */

        /**
         *  a 标签的默认行为   
         *     + 页面跳转 
         *     + 锚点定位
         * */  
               
         // 阻止默认行为
        let link = document.getElementById('link');
        link.onclick = function(ev){
            ev.preventDefault();
            // return false;
        } 
        
        // 禁用右键菜单 (后续可以改为自己的菜单)
        window.oncontextmenu = function(ev){
            // 阻止默认行为 禁用自带右侧菜单
            ev.preventDefault();
            // console.log(ev); 

            // 没有右键菜单 则创建一个
            let contextmenu = document.querySelector('.contextmenu');
            if(!contextmenu){
                contextmenu = document.createElement('div');
                contextmenu.className  = "contextmenu";
                contextmenu.innerHTML = ` 
                    <ul>
                        <li>跳转到首页</li>
                        <li>进入详情</li>
                        <li>逗你玩</li>
                    </ul>
                `;
                document.body.appendChild(contextmenu);
            }

            // 控制右键菜单位置
            contextmenu.style.left = `${ev.clientX + 10}px`;
            contextmenu.style.top = `${ev.clientY + 10}px`;
        }

        // 点击其它内容(不包含contextmenu及里面的内容) 让右键菜单消失 
        window.onclick = function(ev){
            let target = ev.target,
                targetTag = target.tagName;

            // 点击  contextmenu 不做任何处理
            if(targetTag === 'LI'){
                target = target.parentNode,
                targetTag = target.tagName;
            }    
            if(targetTag === 'UL' && target.parentNode.className === 'contextmenu'){
                return;
            } 

            // 移除右侧菜单
            let contextmenu = document.querySelector('.contextmenu');
            if(contextmenu){
                document.body.removeChild(contextmenu);
            }
        }
    </script>

   
</body>
</html>