Question

我正在做一个上下文菜单，我有一些问题/疑问。这是代码：

<body oncontextmenu="return false" onclick="hide()">
    <div style="display:none;" id="menu">
        <table  border="1" width="100px">
            <tr>
                <td>
                    <div  class="item">
                        <a href="http://www.google.es">TEST 1</a>
                    </div>             
                </td>
            </tr>
            <tr>
                <td>
                    <div  class="item">TEST 2</div>
                </td>
            </tr>
        </table>
    </div>
    <script language="javascript" type="text/javascript">
        function show(e) {
            var posx = e.clientX +window.pageXOffset +'px'; 
            var posy = e.clientY + window.pageYOffset + 'px';
            document.getElementById('menu').style.position = 'absolute';
            document.getElementById('menu').style.display = 'inline';
            document.getElementById('menu').style.left = posx;
            document.getElementById('menu').style.top = posy;           
        }
        function hide() {
            document.getElementById('menu').style.display = 'none'; 
        }
    </script>
    <div  oncontextmenu="show(event);"class="menu-item" id="option1">
        option 1
    </div>
    <div  oncontextmenu="show(event);"class="menu-item" id="option2">
        option 2
    </div>
</body>

它工作正常，当我右键单击时，我的上下文菜单出现，但（如你所见）当我点击任何地方（身体事件）时，它必须被隐藏，但它不起作用...只有我点击'menu-item'类。

另一个问题是：可以使用oncontextmenu事件获取元素ID吗？我的意思是，例如，我右键单击“选项1”，我想查看上下文菜单和带元素ID的警报。有可能在同一事件上做到吗？

Answer 1

我冒昧地在你的代码中移动了很多东西：http://jsfiddle.net/Ls9p0ht6/7/

对于初学者，我将JS移动到它自己的文件中。对于身体：

var body = document.getElementsByTagName("body")[0];
body.addEventListener("contextmenu", function(e) {
    e.preventDefault();
});
body.addEventListener("click", hide);

通过使用addEventListener，您可以将事件传递给该函数，并使用e.preventDefault()，正如它所说的那样，可以阻止该事件的默认操作。

然后，我对每个＆＃34;菜单项＆＃34;：

也这样做

var menuItems = document.getElementsByClassName("menu-item");
var i = 0, items = menuItems.length;
while (i < items) {
    menuItems[i].addEventListener("contextmenu", function(e) {
        show(e);
    });
    i++;
};

通过nodeList循环，并将事件侦听器应用于每个。 e.preventDefault()已经在身体上使用，它包含菜单，所以也不需要在这里使用它。

现在，您的新＆＃34;上下文菜单＆＃34;当您右键单击菜单时将出现，默认的菜单将永远不会出现。

关于上下文菜单

1 个答案: