typescript 保持右键单击上下文菜单在屏幕上

rjee0c15 于 2023-04-07 发布在 TypeScript

关注(0)|答案(2)|浏览(138)

bounty将在3天后到期。回答此问题可获得+100声望奖励。Funn_Bobby正在寻找来自可靠来源的答案：我正在寻找一个解决这个问题，我可以实现…一个工作的例子将是伟大的！

我已经为我的上下文菜单创建了一个typescript组件，一切都工作得很好，除了当上下文菜单在屏幕边缘附近激活时，它会越过屏幕边缘，一些项目将无法访问。
这是上下文菜单的HTML结构

<div id="contextMenu">
  <div
    class="menu-link"
    *ngFor="let menuItem of contextMenuItems; index as i"
    (click)="onContextMenuClick($event, menuItem.menuEvent)">
    <div *ngIf="menuItem.menuText !== 'divider'">{{ menuItem.menuText }}</div>
    <hr *ngIf="menuItem.menuText == 'divider'" />
  </div>
</div>

菜单项是根据“上下文”动态添加的
右键单击激活此代码

displayContextMenu(event) {
this.myContextMenuService.buildMenu();
this.rightClickMenuPositionX = event.clientX;
this.rightClickMenuPositionY = event.clientY;
}

我试过几个CSS的东西，但没有任何东西可以保持整个菜单在屏幕上，无论你从哪里激活它。

typescript

来源：https://stackoverflow.com/questions/75889390/keep-right-click-context-menu-on-the-screen

2条答案

按热度按时间

yx2lnoni1#

花了太长的时间才从社区得到答案。这就是我决定解决这个问题的方式…希望它能帮助到其他人。
下面是由对“contextMenu”[ngStyle]=“getYourClickMenuStyle（）”的[ngStyle]调用触发的

const rightClickMenuPositionX = event.clientX;
const rightClickMenuPositionY = event.clientY;
const cMenu = <HTMLInputElement>document.getElementById('contextMenu');
const menuWidth = cMenu.offsetWidth + 30;
const menuHeight = cMenu.offsetHeight + 30;
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
let menuStyleLeft = '';
let menuStyleTop = '';

if((windowWidth - rightClickMenuPositionX)<menuWidth){
menuStyleLeft = (windowWidth - menuWidth).toString() + "px";
} else {
  menuStyleLeft = rightClickMenuPositionX.toString() + "px";
}
if ( (windowHeight - rightClickMenuPositionY) < menuHeight ) {
  menuStyleTop = (windowHeight - menuHeight).toString() + "px";
} else {
  menuStyleTop = rightClickMenuPositionY.toString() + "px";
}
if(menuStyleLeft !== ''){
  return {
    position: 'fixed',
    left: menuStyleLeft,
    top: menuStyleTop
  }
}

赞(0）回复(0）举报 2023-04-07

66bbxpm52#

displayContextMenu(event) {
  this.myContextMenuService.buildMenu();
  // get your contextMenu width and height
  const contextMenu = document.getElementById('contextMenu');
  const contextMenuWidth = contextMenu.offsetWidth;
  const contextMenuHeight = contextMenu.offsetHeight;

  const xPos = event.clientX + contextMenuWidth > window.innerWidth ? window.innerWidth - contextMenuWidth : event.clientX;
  const yPos = event.clientY + contextMenuHeight > window.innerHeight ? window.innerHeight - contextMenuHeight : event.clientY;

  this.rightClickMenuPositionX = xPos;
  this.rightClickMenuPositionY = yPos;
}

赞(0）回复(0）举报 2023-04-07

我来回答

typescript 保持右键单击上下文菜单在屏幕上

2条答案

相关问题

热门标签

最新问答