如何让自定义右键菜单仅显示在Ember表格的激活行上？

刚接触Ember和jQuery确实容易踩这类事件绑定的坑，我帮你梳理下问题所在，再给出调整后的方案：

原代码的问题分析 #

你当前的代码每次点击行时，都会给所有.content-row元素重复绑定contextmenu事件，这就导致右键任何一行都会触发弹窗；同时$('.managed-object-action-menu').click()会触发页面上所有该类菜单，自然会影响所有行。

调整后的代码方案 #

我们需要做到：只给当前点击的激活行绑定右键事件，清理旧事件避免干扰；并且仅针对激活行触发对应自定义菜单。

click: function (event) {
  var eventResult = this.get('tableView').clickRow(event, this.get('object'));
  if (eventResult !== false) {
    this.get('element').focus();
    
    // 1. 先解绑所有行的右键事件，避免重复绑定和旧事件干扰
    $('.content-row').unbind('contextmenu');
    
    // 2. 获取当前点击的激活行（而非所有行）
    var activeRow = $(event.currentTarget).closest('tr');
    
    // 3. 仅给激活行绑定右键事件
    activeRow.find('.content-row').bind('contextmenu', function(e) {
      e.preventDefault();
      var parentId = activeRow.prop('id');
      alert(parentId);
      
      // 4. 控制菜单仅在激活行附近显示
      $('.managed-object-action-menu').hide(); // 先隐藏所有菜单
      // 定位菜单到鼠标右键点击的位置
      $('.managed-object-action-menu').css({
        top: e.pageY,
        left: e.pageX
      }).show();
    });
  }
  return eventResult;
},

额外的Ember最佳实践提示 #

• 尽量避免全局jQuery选择器（比如$('.content-row')），可以用this.$('.content-row')限定查找范围，只操作当前组件内的元素，避免影响页面其他部分。
• 在Ember中更推荐用组件的事件钩子（比如didInsertElement）做一次性事件委托，而不是在click回调里重复绑定事件，能减少内存泄漏风险。
• 记得在组件销毁时（willDestroyElement钩子）解绑所有自定义绑定的事件，避免残留影响。

内容的提问来源于stack exchange，提问作者Aakash Kumar