为什么 '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 更改为 class .item_menu ID 应该是唯一的（在您的 html 中一次）

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

Why 'mouseenter' event does only works for the first element of a spacebar #each iteration?

javascript

css

mouseenter

meteor

spacebars