是否可以将 mouseEnter 与 ember-bootstrap 组件一起使用？答案

【问题标题】：Is it possible to use mouseEnter with ember-bootstrap components?是否可以将 mouseEnter 与 ember-bootstrap 组件一起使用？
【发布时间】：2019-08-11 08:52:27
【问题描述】：

我目前在一个项目中使用Ember Bootstrap，创建导航栏是我使用上下文组件的第一次真实体验。

目前导航栏的代码如下：

{{#bs-navbar type="dark" backgroundColor="primary" class="p-0" as |navbar|}}
{{navbar.toggle}}
<div class="container-fluid" style="padding-left:50px;padding-right:50px;height:50px ">
    <div class="navbar-nav mr-left">
        {{#navbar.content}}
        {{#navbar.nav as |nav|}}

        {{#nav.dropdown as |dd|}}
        {{#dd.toggle}}Dropdown 1 <span class="caret"></span>{{/dd.toggle}}
        {{#dd.menu as |ddm|}}
        {{#ddm.item}}{{#ddm.link-to "test1"}}Link 1{{/ddm.link-to}}{{/ddm.item}}
        {{#ddm.item}}{{#ddm.link-to "test2"}}Link 2{{/ddm.link-to}}{{/ddm.item}}
        {{/dd.menu}}
        {{/nav.dropdown}}

        {{#nav.item}}
        {{#nav.link-to "test"}}Current User: <b>MICKEY MOUSE</b>{{/nav.link-to}}
        {{/nav.item}}
        {{/navbar.nav}}
        {{/navbar.content}}
    </div>
</div>
{{/bs-navbar}}

该组件的部分规范是，当用户将鼠标悬停在其中一个下拉链接上时，左侧会出现一个子菜单，而我很难弄清楚该怎么做。

主要问题是我不知道如何在这样的上下文组件中利用mouseEnter 事件。我通常可以在元素空间中添加一个动作，例如：

<h1 {{action "anAction" on="mouseEnter"}}>Text</h1>

我不能在这里这样做，因为元素空间是由子组件控制的。同样，如果我尝试使用像

这样的关闭动作

{{ddm.link-to anAction=(action 'hostAction')}}

然后我不确定如何在 mouseEnter 事件上指定动作触发并得到“未找到动作”性质的错误 - 我怀疑是因为 Ember Bootstrap 插件没有向我公开 anAction 动作使用。

任何指导将不胜感激。

（我确实尝试为此设置一个工作旋转，但除了显示一个没有链接的空导航栏外什么也做不了！）

【问题讨论】：

与其说是推荐，不如说是一个答案，但在 embermap.com/podcast/a-dropdown-nest 的 EmberMap 播客上对这个问题和可能的解决方案进行了很多讨论，我认为他们可能已经制作了深入的视频作为好吧。
感谢推荐，这非常有趣，他们确实做了一个视频，我一定会去看的
嗨@Abuelo，如果有帮助，请您为我的回答投票。

标签： ember.js

【解决方案1】：

您可以使用 onmouseenter 在 ember hbs 中触发操作

<h1 onmouseenter={{action "action-name"}}>Text</h1>

在您的{{#ddm.link-to}} 中使用mouseEnter（类似于HTML onmouseenter）

{{#ddm.link-to mouseEnter=(action "action-name") "test1"}}Link 1{{/ddm.link-to}}

【讨论】：

感谢您确认语法 - 我可以看到哪里出错了。我想您已经回答了具体问题，但您介意将 onmouseover 更改为 mouseEnter 以便我接受答案吗？ onmouseover 不是内置的 Ember Events 之一，实施时没有给出结果。
@Abuelo 根据您的要求有正确的。你能接受答案吗？顺便说一句，您需要在鼠标悬停时调用一个动作，不是吗？
mouseEnter 仅适用于 ember 组件而不适用于 HTML 标签。您必须使用 {{action}} 修饰符或将操作设置为 onmouseenter 属性。 <h1 onmouseenter={{action "foo"}}> 或 <h1 {{action "foo" on="mouseEnter"}}>。我会推荐第一个原因动作修饰符在冒泡时有一些奇怪的边缘情况。
这是我之前的回答。由于@Abuelo 要求将其更改为mouseEnter 事件，因此我在两个地方都盲目更换。 HTML 标签支持onmouseenter
感谢您的澄清！