Javascript 如何从上下文菜单中右键单击项目的id或详细信息？

我用AngularJS填充了一个表。在表中的链接按钮上单击鼠标右键，我想显示我使用Jquery创建的特定上下文菜单。很好。我可以在右键单击时看到上下文菜单。但是，如果我单击上下文菜单中的任何选项（如Delete），我希望获得所单击项目的Id。它应该作为参数传递，以便我可以处理该函数。我总是得到未定义的Id

请帮助我如何在上下文菜单中右键单击项目的Id

//上下文菜单功能 var$contextMenu=$contextMenu； $body.oncontextmenu，table tbody按钮，Function E{ $contextMenu.css{ 显示：块， 左：e.pageX， 顶部：e.pageY }; 返回false； }; $contextMenu.onclick，a，函数{ $contextMenu.hide； }; $html.clickfunction{ $contextMenu.hide； }; $scope.nodes=[{ 身份证号码：228， 名称：文件夹1， 描述：， 路径：227/， 嗯：是的 }, { 身份证号码：229， 名称：文件夹2， 描述：， 路径：227/， 嗯：是的 } ]; //在上下文菜单上调用Delete函数 $scope.deleteFolder=functiondetailid{ console.logJSON.stringifydetailid； //如果我发送的是detail而不是detail.id，则返回的是完整的json。 }; 上下文菜单{ 位置：固定； 显示：无； } .contextmenustyle{ 显示：块； 位置：静态； 边缘底部：5px； } 名称 成员 {{detail.name} - 删去 您可以将此id作为数据属性包含到按钮中：

<button ng-click="openFolder(detail.id, detail.name)" data-id="{{detail.id}}">

---

要获取单击的对象，需要对绑定函数进行一些更改

HTML:

---

已在绑定函数中传递事件。您可以在单击功能中获得单击的对象。

为了简单地解决问题，我们可以为每个细节对象创建上下文菜单

您的主要问题是上下文菜单div在您的 ng重复循环，因此无法在那里获取detail.id

我已经把它放在了你的循环中，并将上下文菜单id改为class，所有的东西都像你的代码一样工作。只需忽略其他特定于角度的代码，如ng控制器、ng应用程序，它们仅用于此演示工作。当我以这种方式显示上下文菜单时，您可以看到

$(this).parent().find('.contextMenu').css({
  display: "block",
  left: e.pageX,
  top: e.pageY
});

我也发了一封信

var-app=angular.module'myApp'，[]； 应用程序控制器'myCtrl'，函数$scope{ $body.oncontextmenu，table tbody按钮，Function E{ $.contextMenu.hide； $this.parent.find'.contextMenu'.css{ 显示：块， 左：e.pageX， 顶部：e.pageY }; 返回false； }; $.contextMenu.onclick，一个函数{ $this.hide； }; $html.clickfunction{ $.contextMenu.hide； }; $scope.nodes=[{ 身份证号码：228， 名称：文件夹1， 描述：， 路径：227/， 嗯：是的 }, { 身份证号码：229， 名称：文件夹2， 描述：， 路径：227/， 嗯：是的 } ]; $scope.deleteFolder=functiondetailid{ console.logdetailid； }; }; .上下文菜单{ 位置：固定； 显示：无； } .contextmenustyle{ 显示：块； 位置：静态； 边缘底部：5px； } 名称 成员 {{detail.name} 删去 -

---

您的代码段似乎不起作用。请在上下文菜单中传递事件：$contextMenu.onclick，a，function{}我尝试过。它将返回除Id以外的所有垃圾。{originalEvent:{isTrusted:true}，类型：contextmenu，目标：{jQuery311069559266060260442:{$binding:[detail.name]}，jQuery311069559266060260441:{events:{click:[{type:click，origType:click，guid:127，namespace:}}}}}}，当前目标：{jQuery311069559266060606060606060260442:{$binding:[detail.name]，{$binding:[detail.name]，jQuery31206950606060606601:{事件：{click:[{type:click，origType:click，guid:127，namespace:}]}在添加属性时，contextmenu不起作用。它现在也不显示选项。其中有些错误？使用另一个属性名称，如data-detaild-id。可能插件也使用此属性。不-只需将其包装到jQuery中。我已更改代码我正在获取控制台。logthis.data'id'；-Unfined：现在这个提琴就在你的页面附近吗？检查控制台-它从数据属性打印123。检查你是否有正确的detailId插入到这个属性否。我还不熟悉提琴，也没有在这里附加一个好的片段。正在学习它。但是我标记为“是”的解决方案工作正常。因为我的上下文菜单在t之外他使用了div并在contextmenu定义中进行了一些更改。它工作得很好。感谢您的帮助如何在单击函数中获取单击的对象？我使用了ur snipped$e.currentTarget，它返回{0:{jQuery3110723294038592321:{events:{click:[{type:click，origType:click，guid:102，namespace:}，{type:click，origType:click，guid:103，namespace:}}]}}，长度：1}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
{{temp}}
<table class="table table-responsive table-hover" id="foldertable">
  <thead>
    <tr style="text-align: center">
      <th>Name</th>
      <th>Members</th>
    </tr>
  </thead>
  <tbody id="projtable">
    <tr ng-repeat="detail in nodes" ng-mouseover="showShare()">
      <td><button id="namesdetails" class="btn btn-link" ng-click="openFolder(detail.id, detail.name)" style="text-decoration: none !important">

 <span class="fa fa-folder" style="font-size: larger"></span> 
{{detail.name}}</button></td>
      <td> -- </td>
    </tr>
  </tbody>
</table>

<!-- context menu -->
<div id="contextMenu" class="dropdown clearfix">
  <ul class="dropdown-menu contextmenustyle" role="menu" aria-labelledby="dropdownMenu">
    <li><a tabindex="-1" attr="edit" href=""><span class="glyphicon glyphicon-edit"></span> Edit/Rename</a></li>
    <li><a tabindex="-1" attr="delete" ng-click="deleteFolder(detail.id)"><span class="glyphicon glyphicon-remove"></span> Delete</a></li>
  </ul>
</div>

$contextMenu.on("click", "a", function(e) {
  console.log(e.target.attributes.attr.value); //delete or edit
  $contextMenu.hide();
});

$(this).parent().find('.contextMenu').css({
  display: "block",
  left: e.pageX,
  top: e.pageY
});