单击子元素触发的模糊事件答案

【问题标题】：Blur event triggered by click on child element单击子元素触发的模糊事件
【发布时间】：2022-10-17 12:54:10
【问题描述】：

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

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

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

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

像这样，我通过单击输入事件停止了下拉菜单的关闭。但现在的问题是focusing 输入算作不再关注父 div，这会阻止完全检测到模糊。

【问题讨论】：

为什么那里模糊（它的目的/意图是什么）？
@depperm 用于关闭下拉菜单。
为什么不把它放在靠近下拉菜单的地方呢？
@depperm 我不太明白你的意思。带有模糊事件的 div 包括整个下拉列表，以便在外部单击时轻松关闭它。
您可以包含整个 div 内容并包含预期的行为吗？

标签： javascript vue.js

【解决方案1】：

我所有问题的解决方案是focusout 事件。它还检测input 子元素内的焦点。 focusout

【讨论】：

【解决方案2】：

发生这种情况是因为事件冒泡，以便它们传播给父母。

SO上有一个有趣的问题，我过去碰巧经常碰到：How to stop propagating event from parent div to child div

有几种方法可以阻止这种传播，但在这种情况下最容易实现的可能是在子元素上使用 css 属性：

pointer-events: none;

但是由于您显然需要该输入来触发事件，也许您可以在添加到父元素的事件处理程序中尝试这个其他选项：

  if(event.target !== event.currentTarget) return;

但是，如果您还不能实现您的目标，您可以在处理程序中尝试这一行来处理您希望它不传播到父元素的事件：

 event.stopPropagation();

作为旁注，我意识到 div 不习惯具有模糊事件，因为只要它们没有任何 tabindex="0" 或 contentEditable 属性，它们就不会捕获焦点。也许这是由该指令在渲染真正的 html 时设置的。

【讨论】：

但是像这样也无法再关注input，因为我根本没有指针事件。并且更改输入的值及其周围的 div 并没有起到作用。
使用另一个选项，我只是检查是否单击了父元素本身。但由于它是一个模糊事件，我希望它在不单击元素本身时触发。这很棘手...

【解决方案3】：

我想要同样的行为。但是 focusout 事件在 React 中不存在。

我解决它的方法是使用onBlur 事件并检查是否有任何子元素是relatedTarget：

如果是null，则子元素还没有被点击（所以，我们要隐藏下拉菜单）
如果不是null，则点击了子元素（这样可以防止下拉菜单被隐藏）

代码 sn-p 显示父 div：

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

【讨论】：