liuxilei/notes

contextmenu事件

Opened this issue · 0 comments

liuxilei commented

Window95在PC中引入了上下文菜单的概念，即通过单击右键可以调出上下文菜单。不久，这个概念也被引入了Web领域。为了实现上下文菜单，开发人员面临的主要问题是如何确定应该显示上下文菜单（在Window中，是右键单击；在Mac中，是Ctrl+单击），以及如何屏蔽与该操作关联的默认上下文菜单。为解决这个问题，就出现了contextmenu这个事件，用以表示何时应该显示上下文菜单，以便开发人员取消默认的上下文菜单而提供自定义的菜单。

由于contextmenu事件是冒泡的，因此可以为document指定一个事件处理程序，用以处理页面中发生的的所有此类事件。因为contextmenu事件属于鼠标事件，所以其事件对象中包含与光标位置有关的所有属性。通常使用contextmenu事件来显示自定义的上下文菜单，而使用onclick事件处理程序来隐藏该菜单。以下面的HTML页面为例。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上下文菜单</title>
    <style>
        .myMenu {
            position: absolute;
            visibility: hidden;
            background-color: silver;
        }
    </style>
</head>
<body>
    <div class="myDiv">
        Right click or Ctrl+click me to get a custom context menu.<br/>
        Click anywhere else to get the default context menu.
    </div>
    <ul class="myMenu">
        <li>Nicholas sites</li>
        <li>Wrox site</li>
        <li>Yahoo!</li>
    </ul>
    <script>
        const myDiv = document.querySelector(".myDiv");
        const myMenu = document.querySelector(".myMenu");
        myDiv.addEventListener("contextmenu", event => {
            //组织默认的上下文菜单
            event.preventDefault();
            myMenu.style.left = event.clientX + "px";
            myMenu.style.top = event.clientY + "px";
            myMenu.style.visibility = "visible";
        });
        //正常点击隐藏自定义的上下文菜单
        document.addEventListener("click", () => {
            myMenu.style.visibility = "hidden";
        });
    </script>
</body>
</html>