迅速了解JS自定义鼠标右键框

最新推荐文章于 2024-05-21 14:15:14 发布

AkieMX

最新推荐文章于 2024-05-21 14:15:14 发布

阅读量144

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/m0_46723475/article/details/106584421

版权

在这里插入图片描述

JS自定义鼠标右键框

<style>
    #demo {
        width: 400px;
        height: 400px;
        background-color: lightpink;
        cursor: pointer;
        margin:100px 0 0 100px;
    }
    .menu{
        width: 100px;
        height: 200px;
        background-color: #ff8f4e;
        position: absolute;
        text-align: center;
    }
</style>

<body>
    <div id="demo"></div>
</body>

<script>
    //先获取Dom对象
    let demo = document.querySelector('#demo')
    
    //在demo内设置鼠标右击事件方法
    demo.oncontextmenu = function(e){
        //阻止默认浏览器默认行为
        e.preventDefault();
        //3.找到节点，判断当存在时再右键就清除前一个，使其只存在一个在页面上
        let menu = document.querySelector('.menu')
        if(menu) menu.remove()
        //1.创建新的div标签，并添加class样式名为menu，并用appendChild将menu节点加到body的末尾.
        menu = document.createElement('div')
        menu.classList.add('menu')
        
        //在menu节点内添加一个div，页面显示‘come on’
        let menu1 = document.createElement('div')
        menu1.innerHTML = 'come on.'
        menu.appendChild(menu1)
        document.body.appendChild(menu)
        //2.设置浮动坐标在鼠标点击处
        menu.style.left = e.pageX + 'px'
        menu.style.top = e.pageY + 'px'
    }
    
    //设置点击事件，找到节点判断自定义右键是否存在该节点，存在时，但我点击到除demo以外的地方时就清除该节点
    window.onclick = e => {
        let menu = document.querySelector('.menu')
        if (menu && !menu.contains(e.target)) {
            menu.remove()
        }
    }
</script>

预览效果

当你点击了粉色区域以外的位置自定义的右键就会被清除
在这里插入图片描述

AkieMX

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
迅速了解JS自定义鼠标右键框

JS自定义鼠标右键框<style> #demo { width: 400px; height: 400px; background-color: lightpink; cursor: pointer; margin:100px 0 0 100px; } .menu{ width: 100px; height: 200px; backgroun.
复制链接

扫一扫