为什么& # 39;mouseenter& # 39;Event does只对每次迭代中空格键#的第一个元素起作用

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

本文关键字:空格键 起作用 迭代 元素 第一个 Event mouseenter does 为什么      更新时间:2023-09-26

我正在尝试在模板组件中创建一个离画布菜单。我把这篇文章当作参考。

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

  • 一个容器标签,我迭代的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事件不会触发。为什么?

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