右键菜单自定义

最新推荐文章于 2023-08-24 10:58:49 发布

HAI6545

最新推荐文章于 2023-08-24 10:58:49 发布

阅读量184

点赞数 1

分类专栏： JavaScript案例文章标签： javascript html angular.js

本文链接：https://blog.csdn.net/HAI6545/article/details/122220512

版权

本文介绍了如何使用JavaScript和HTML来创建并自定义浏览器右键菜单，特别关注了结合Angular.js框架的应用，通过实例展示了如何在网页元素上实现个性化的右键操作功能。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
<script src="./js/utils.js"></script>
<script>
// 右键菜单 - 给浏览器绑定右击事件
/*
1.阻止默认行为
2.自己创建一个菜单，显示body中
3.设置菜单的位置 - 通过鼠标在浏览器中的位置进行计算
4.每个菜单绑定鼠标移入事件 - 让菜单背景变成灰色
5.给每个菜单绑定单击事件 - 弹出当前菜单的内容
*/
var arr = ['Vue', 'React', 'Angular']
document.oncontextmenu = function(){
    // 将之前的ul删掉，再创建
    var myMenu = document.querySelector('.myMenu');
    if(myMenu){
        myMenu.parentElement.removeChild(myMenu)
    }
    // 自己创建菜单
    var ul = document.createElement('ul')
    ul.className = 'myMenu'
    // 遍历数组创建li
    arr.forEach(function(v){
        var li = document.createElement('li')
        li.innerText = v
        ul.appendChild(li)
    })
    //

最低0.47元/天解锁文章

HAI6545

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
右键菜单自定义

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body></body><script src="./js/utils.js"></script><script>// 右键菜单 - 给浏览器绑定右.
复制链接

扫一扫