Aurelia 事件触发顺序

Question

我正在创建一个带有可搜索选择的自定义模板。输入元素上有focus (trigger)、blur (trigger)、keyup (delegate) 和value (bind) 绑定。下拉内容显示在与此输入相同的 div 中的 div 中。当焦点位于输入框上时，下拉菜单会显示，但是当我单击自定义下拉菜单中的一个元素时，会在单击委托触发之前触发 blur 事件，因此，我不会调用 @ 987654326@方法。

模板如下所示：

<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>

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

Answer 1

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

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

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

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

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

TL;DR

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

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