Aurelia 事件触发顺序

Question

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

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

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

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

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

TL;DR

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

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

Aurelia 事件触发顺序

Aurelia event firing order

javascript

aurelia