简介
在前端开发中，我们经常需要使用右键菜单来提供一些更多的操作选项。当用户执行右键菜单时，我们需要知道哪个元素触发了上下文菜单。
本篇文章将介绍如何使用 JavaScript 在浏览器中检测右键菜单并获取上下文菜单执行时的元素。
监听上下文菜单事件
要执行此操作，我们需要首先监听 contextmenu 事件。这个事件在用户右键点击页面中的元素时触发。可以使用 addEventListener() 方法来添加此事件的侦听器。
---------------------------------------- --------------- - -- --- ---
获取目标元素
在 contextmenu 事件的处理程序中，我们可以通过 event.target 属性获取触发事件的元素。这个属性包含了指向目标元素的引用。
---------------------------------------- --------------- - --- ------ - ------------- -- --- ---
避免默认上下文菜单
在大多数情况下，我们可能会想要自定义自己的上下文菜单，而不是使用默认的上下文菜单。要避免显示默认上下文菜单，可以使用 preventDefault() 方法。
---------------------------------------- --------------- - ----------------------- -- --- ---
示例代码
以下是完整的示例代码，演示如何获取上下文菜单执行时的元素：
--------- -----
------
------
------------------ ---------------
-------
------
---- ------------------------
--------
--- ------ - ----------------------------------
-------------------------------------- --------------- -
-----------------------
--- ------------- - -------------
-------------------- - -----------------------
---
---------
-------
-------总结
在本文中，我们学习了如何使用 JavaScript 检测右键菜单并获取上下文菜单执行时的元素。通过监听 contextmenu 事件和使用 event.target 属性，我们可以轻松地捕获当前元素，以便在自定义上下文菜单时使用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/30685