为什么'mouseenter'事件只适用于空格键#each迭代的第一个元素？

Question

我正在尝试在模板组件中制作画布外菜单。我把this article 作为参考。

我有一个非常常见的设置：

• 一个容器选项卡，我在其中迭代 items 集合
• 一个 item 组件，其中有我的画布外菜单

换句话说，我在容器中的 items 光标上有一个空格键迭代：

{{#each items}}
  {{> item}}
{{/each}}

在我的item 组件中，我有一个简单的mouseenter 事件附加到<a> DOM 节点。

Template.item.events({
  "mouseenter  #item_menu": function(event, template){
    console.log("hover detected");
    $(template.find('#item_wrapper')).toggleClass('show-nav')
  },
})

它与第一个 item 组件完美配合，但对于所有其他组件，mouseenter 事件不会被触发。为什么？

Answer 1

将元素和事件选择器从 #item_menu 更改为类 .item_menu ID 应该是唯一的（在您的 html 中一次）