点击子元素触发模糊事件

Question

我有一个包含输入的父元素：

<div @blur="onLeaveSelect($event)">
    <div v-if="searchActivated" >
        <input type="text" placeholder="Search..." @mousedown.stop>
    </div>
    ...
</div>

现在单击input子元素时，将触发blur父元素的事件。div我如何防止这种行为？用于click.stop禁止冒泡适用于其他元素，但不适用于该输入。

        const onLeaveSelect = (evt) => {
            if (!evt.currentTarget.contains(evt.relatedTarget)) {
                open.value = false;
                showDescription.value = false;
                searchActivated.value = false;
            }
        }

像这样，我通过单击输入事件来阻止下拉菜单关闭。但现在的问题是，focusing输入不再聚焦于父 div，这导致模糊无法被完全检测到。

Answer 1

我想要同样的行为。但focusoutReact 中不存在该事件。

我解决这个问题的方法是使用onBlur事件检查是否有任何子元素是relatedTarget：

• 如果是null，则尚未单击子元素（因此，我们要隐藏下拉列表）
• 如果不是null，则已单击子元素（这将防止下拉列表被隐藏）

显示父级的代码片段div：

<div
    tabIndex='-1'
    onBlur={e => e.relatedTarget === null && setState(false)}
>
...
</div>