electron上下文菜单--指定弹出区域

如何指定对象右击可弹出上下文菜单?

  1. 使用document.querySelector(targetSelector)获取指定区域,
  2. 然后使用node1.contains(node2)判断node2是否时node1子节点,如果是在指定区域内,否则不在
  3. 根据2的结果决定是否弹出上下文菜单
/**
itemArr:菜单项
targetSelector:指定显示上下文菜单的区域type:string:#id,.className等
**/
const useContextMenu = (itemArr, targetSelector, deps) => {
        let clickedNode = {}
        const menu = new Menu()
        itemArr.forEach(item => {
            menu.append(new MenuItem(item))
        })
const handler = (e) => {
            // 区域限定
            //e.targets是否时document.querySelector(targetSelector)的子节点
            if (document.querySelector(targetSelector).contains(e.target)) {
                clickedNode.current = e.target
                e.preventDefault()
                menu.popup({
                    window: remote.getCurrentWindow()
                })
            }
        }
                
    window.addEventListener('contextmenu', handler) //右击鼠标时触发执行 handler

  }            

  

原文地址:https://www.cnblogs.com/baixinL/p/14274709.html