我一直在为 Angular 应用程序中我的一个 View 上的表格开发自定义上下文菜单。这个想法是在右键单击该表中的任何特定行时显示一个隐藏的、绝对位置的 div。
我认为该事件返回了正确的 clientX
和 clientY
,但我遇到麻烦的地方是当我尝试将这个隐藏的 div 定位到坐标右键单击事件。我现在正在使用的是:
$('.toggled-options-status-change').css({
top: event.clientX,
left: event.clientY
}).show();
其中 .toggled-options-status-change
是隐藏 div 的类名。
基本上发生的是 div 的位置似乎是随机点,因此不能简单地通过将顶部和左侧位置递减为常量值来固定它。
我很难说出发生了什么,我希望能与你们分享 fiddle 之类的东西。我希望有人以前遇到过这样的问题,并且知道进一步调查的方向。
编辑 - 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 大纲:
<html>
<body>
<div class="off-canvas-wrap">
<div class="inner-wrap">
<div ng-view>
...
</div>
</div>
</div>
</body>
</html>
最佳答案
几乎总是遇到这类事情,至少对我来说,答案非常简单,让我看起来像个傻瓜,因为第一次就错过了。哦,无论如何,很高兴弄清楚。
top 应该是 clientY,而不是 clientX,反之亦然。 天啊
关于javascript - 如何在 Angular 应用程序中制作自定义上下文菜单?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33268937/