Question

一直在仔细阅读：How to add a custom right-click menu to a webpage?

所以我有2个HTML文件和1个JS脚本。我根本不使用JQuery。

popup.html

<!DOCTYPE html>
    <head>
        <title id="title">Datajuggler</title>
    </head>
    <body>
        <script src="popup.js"></script>
    </body>
</html>

popup.js

var xhr = new XMLHttpRequest();
xhr.open("GET", "contextmenu.html");
xhr.send();

document.addEventListener("contextmenu", function(e) {
    // how do I draw the context menu here?
    e.preventDefault();
});

contextmenu.html

<div id="menu">
    <ul>
        <li><a href="http://www.google.com">Google</a></li>
        <li><a href="http://www.youtube.com">Youtube</a></li>
    </ul>
</div>

所以它非常简单。我从contextmenu.html拉出上下文菜单HTML，我希望每当我用鼠标右键单击（contextmenu事件监听器）时都会显示这个div。但是，如何显示此div代替默认上下文菜单？

感谢。

Answer 1

快速实施并测试了这个：

<强> popup.html：

<!DOCTYPE html>
    <head>
        <title id="title">Datajuggler</title>
        <style>
            html{
              height: 100%;
            }
            body {
              min-height: 100%;
              position: relative;
            }
            #menu{
              position: absolute;   
              border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <script src="popup.js"></script>
    </body>
</html>

注意：

如果body为空=＆gt; height: 0px（因此您的点击事件无法被检测到）
在</body>结束标记
定位您的菜单absolute

<强> contextmenu.html：

<div id="menu" style="display: none">
    <ul>
        <li><a href="http://www.google.com">Google</a></li>
        <li><a href="http://www.youtube.com">Youtube</a></li>
    </ul>
</div>

注意：

隐藏菜单（设置display:none）

<强> popup.js：

xhr.onreadystatechange = function(){
    if (xhr.readyState == 4 && xhr.status == 200){

        // append the menu to `body`
        document.body.innerHTML += xhr.responseText;

        var menu = document.getElementById('menu');

        // overwrite the right click event
        document.addEventListener("contextmenu", function(e) {      
            e.preventDefault();         
            // show the menu        
            menu.style.display = 'block';
            // set the left and top position based on mouse event coordonates
            menu.style.left = e.x + 'px';
            menu.style.top = e.y + 'px';        
        });

        // close the menu on document click
        // TODO verify if the click is in the menu boundaries
        document.addEventListener("click", function(e){
            menu.style.display = 'none';
        });
    }
}

// make xhr `async` request => third param `true`
xhr.open("GET", "contextmenu.html", true);
xhr.send();

注意：

打开网络浏览器控制台（F12）=＆gt;转到javascript控制台，看看是否有任何错误
在http protocol（网络服务器）上测试应用程序，否则您的xhr因为 cross origin

创建上下文菜单

1 个答案: