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

Question

我正在尝试在模板组件中制作 Canvas 外菜单。我拍了this article作为引用。

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

• 一个容器选项卡，我在其中迭代 items收藏
• 一个 item我有 Canvas 外菜单的组件

换句话说，我的 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 中)