右键菜单自定义

最新推荐文章于 2024-11-23 14:03:19 发布

原创

最新推荐文章于 2024-11-23 14:03:19 发布 · 271 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #angular.js

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

<!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)
    })
    // 将ul放在body中
    document.body.appendChild(ul)
    // 获取鼠标在浏览器中的位置
    var x = window.event.pageX
    var y = window.event.pageY
    //