javascript - Aurelia 事件触发顺序

Question

我正在创建一个带有可搜索选择的自定义模板。有 focus (trigger), blur (trigger), keyup (delegate) 和 value (bind) 绑定(bind)在输入元素上。下拉内容显示在一个 div 中，位于与此输入相同的 div 中。当焦点位于输入框上时会显示下拉列表，但是当我单击自定义下拉列表中的一个元素时，模糊事件会在单击委托(delegate)触发之前触发，因此，我没有接到 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>

我怎样才能让点击元素首先触发，而不用超时和其他东西来破坏它......？ - 我已经尝试在包含 class="dropdown" 的 div 上设置 blur.trigger，但它根本不会触发......

Answer 1

要为元素触发 click 事件，需要发生 2 件事。

1. 开始点击时，鼠标需要位于该元素上。
2. 点击结束时，鼠标需要位于该元素上。

您可以注意到，通过开始单击某个元素，然后在单击时将鼠标移离该元素，然后在该元素外释放鼠标。在这种情况下，click 事件将不会触发。

但如果您开始单击该元素，然后 - 在按住鼠标的同时 - 退出 - 但再次进入并释放鼠标 - 然后将触发 click 事件。

在你的情况下 - 第二个要求永远不会满足 - 因为当你释放鼠标时 - blur 事件已经触发并使你的元素消失 - 所以你的元素没有捕捉到释放鼠标。

长话短说

只需将您的事件从 click 更改为 mousedown - 然后您的代码将在您单击该元素时立即触发。

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