Aurelia事件触发顺序

Question

我正在创建一个带有可搜索选择框的自定义模板。输入框上有focus (trigger)、blur (trigger)、keyup (delegate)和value (bind)绑定。下拉内容显示在一个

中，与此输入框位于同一

中。当焦点在输入框上时，下拉菜单会显示，但当我点击自定义下拉菜单中的某个元素时，模糊事件会先触发，而不是点击委托事件，因此我没有调用selectThis()方法。

模板如下：

<template>
<require from="../searchabledropdown/searchabledropdown.css"></require>
<div class="dropdown">
    <input type="text" 
           placeholder="Search.." 
           id="inputSearchField" 
           value.bind="searchValue"
           keyup.delegate="findData()"
           focus.trigger="changeVisibility(true)"
           blur.trigger="changeVisibility(false)">
    <div if.bind="visible" class="dropdown-content">
        <a href="${'#' + option.thingId}" click.delegate="selectThis(option.thingId)" repeat.for="option of thingimabobs">${option.textValue}</a>
    </div>
</div>

如何让点击元素先触发，而不是使用超时等方法进行hack？-我已经尝试在包含class="dropdown"的div上设置blur.trigger，但它根本不会触发...

- Bjørn

---

在这里使用trigger而不是delegate有什么原因吗？你应该除非不能使用delegate，否则都使用delegate。 - Jesse

如果我正确地理解了您所需的功能，那么在输入字段中输入x个字符后显示下拉列表是否比每当输入字段获得焦点时都更容易呢？ - Jesse

据我所理解，您不能在焦点和模糊上使用委托。打开下拉列表不是问题...我的问题是在正确的时间关闭它...它打开得很好 :) - Bjørn

Answer 1

要使元素的click事件触发，需要满足两个条件:

1. 鼠标在点击开始时必须在该元素上。
2. 鼠标在点击结束时必须在该元素上。

如果你在一个元素上开始点击，然后在点击时将鼠标移开-并在元素外释放鼠标，你会注意到这一点。此时click事件不会触发。

但是，如果你在元素上开始点击，然后 - 在按住鼠标的同时 - 从元素中退出，但再次进入并释放鼠标 - 那么click事件将会触发。

在你的情况下 - 第二个条件从未得到满足 - 因为当你释放鼠标时，blur事件已经触发并使你的元素消失 - 因此你的元素无法捕捉到鼠标的释放。

简而言之：

只需将事件从click更改为mousedown即可立即触发代码。

http://codingrepo.com/javascript/2017/05/19/javascript-difference-mousedown-mouseup-click-events/

- avrahamcool

---

谢谢你！:D 当我刚明白时，非常合乎逻辑 :) 同时也非常感激详细的解释...永远不要停止这样做！:) - Bjørn