javascript - 如何在 Angular 应用程序中制作自定义上下文菜单?

标签 javascript jquery html css angularjs

我一直在为 Angular 应用程序中我的一个 View 上的表格开发自定义上下文菜单。这个想法是在右键单击该表中的任何特定行时显示一个隐藏的、绝对位置的 div。

我认为该事件返回了正确的 clientXclientY,但我遇到麻烦的地方是当我尝试将这个隐藏的 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/

相关文章:

php - 在 php 中使用 ajax 和 jquery 时,数据在数据库中多次输入

css - 标题旁边的 bootstrap jumbotron 中的图像

html - float 多个表

javascript - 从 javascript 函数调用 jquery

javascript - 使用 TypeScript 设置 window.location

jquery - Bootstrap Modal 不会在 MOBILE chrome 上触发,在移动 firefox/ie 上工作正常

php - 删除 HTML 中标签之间的空格

javascript - ECMA 类 - 返回 HTML 并触发(类)函数

java - Struts2 token 拦截器 : CSRF protection

javascript - Ajax 在没有警报的情况下无法在 Firefox 中工作