Javascript 如何在Angular应用程序中创建自定义上下文菜单？_Javascript_Jquery_Html_Css_Angularjs

Javascript 如何在Angular应用程序中创建自定义上下文菜单？

javascript jquery html css angularjs

Javascript 如何在Angular应用程序中创建自定义上下文菜单？,javascript,jquery,html,css,angularjs,Javascript,Jquery,Html,Css,Angularjs,在angular应用程序中，我一直在为我的一个视图上的一个表创建自定义上下文菜单。其思想是在右键单击此表中的任何特定行时显示一个隐藏的绝对位置div 我认为该事件正在返回正确的clientX和clientY，但我遇到的问题是当我试图将这个隐藏的div定位到右键单击事件的坐标时。我现在用的是： $('.toggled-options-status-change').css({ top: event.clientX, left: event.clientY }).show(); 其中.to

在angular应用程序中，我一直在为我的一个视图上的一个表创建自定义上下文菜单。其思想是在右键单击此表中的任何特定行时显示一个隐藏的绝对位置div

我认为该事件正在返回正确的

clientX

和

clientY

，但我遇到的问题是当我试图将这个隐藏的div定位到右键单击事件的坐标时。我现在用的是：

$('.toggled-options-status-change').css({
  top: event.clientX,
  left: event.clientY
}).show();

其中

.toggled options status change

是隐藏div的类名

基本上，div的位置看起来是随机点，所以它不能简单地通过减少顶部和左侧位置的常量值来固定

我很难说到底发生了什么，我希望能和你们分享一把小提琴什么的。我希望有人以前遇到过这样的问题，并且知道进一步调查的方向

编辑-CSS

.toggled-options-status-change {
  position: absolute;
  display: none;
}

.off-canvas-wrap {
  -webkit-backface-visibility: hidden;
  position: relative;
  width: 100%;
  overflow: hidden;

.inner-wrap {
  -webkit-backface-visibility: hidden;
  position: relative;
  width: 100%;
  -webkit-transition: -webkit-transform 500ms ease;
  -moz-transition: -moz-transform 500ms ease;
  -ms-transition: -ms-transform 500ms ease;
  -o-transition: -o-transform 500ms ease;
  transition: transform 500ms ease;
}

编辑-HTML

相关html大纲：

...

几乎总是这样，至少对我来说，答案非常简单，让我第一次错过它时看起来像个傻瓜。哦，不管怎样，很高兴能弄明白

top应该是clientY，而不是clientX，反之亦然。omg

您可以发布与

切换选项状态更改

类相对应的css吗？此元素是否位于主体的根中？如果不是，则任何作为祖先的已定位元素都将导致其未正确定位。请出示所有相关代码。。事件处理程序和html大纲结构不，不是。它上面有几层。我会在作品中发布相关的提纲。是的，因为它是一个有角度的应用程序，这个div隐藏在一个部分隐藏的内部ng视图中。我现在想知道基金会的

。内部包裹和。非画布包裹是否影响位置？我想他们把身体放大了吧？我得调查一下。
<html>
  <body>
    <div class="off-canvas-wrap">
      <div class="inner-wrap">
        <div ng-view>
          ...
        </div>
      </div>
    </div>
  </body>
</html>