Vue.js 一起输入键和模糊事件答案

【问题标题】：Vue.js enter key and blur events togetherVue.js 一起输入键和模糊事件
【发布时间】：2018-10-04 10:56:34
【问题描述】：

我正在尝试这样做，以便如果我按下回车键或元素失去焦点，那么它会隐藏元素并显示一条消息。但问题是，当我按下回车键并且元素隐藏时，它也会触发模糊事件。它应该只执行其中一个。

另外，我怎样才能避免通过调用 hideField() 函数来重复自己两次。我可以只调用一次（bur 或 key.enter）吗？

<input id="name" v-on:blur="hideField('name')" v-on:keyup.enter="hideField('name')">

这是一个小提琴。 http://jsfiddle.net/dag5ch26/3/

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

您应该在 keyup.enter 事件上调用 blur 方法。这会导致模糊事件被间接触发。

<input id="name" v-on:blur="hideField('name')" v-on:keyup.enter="$event.target.blur()">

【讨论】：

为我工作，非常感谢

【解决方案2】：

鉴于您的示例的局限性，我认为没有必要像您拥有的那样在 enter 上触发事件。如您所见，keyup.enter 事件也会触发blurs 事件，那么为什么不完全依赖blur 呢？我知道您可能已经简化了您的用例，但我在此处看不到 keyup.enter 的原因。

作为旁注，您可以使用而不是按 ID 选择元素 event.target 用于元素参考。例如。 @v-on:blur="hideField"。该事件会自动传递给hideField()。或者，您可以使用 @v-on:blur="hideField($event.target)" 将元素本身传递给方法。这简化了您的调用并减少了不必要的查找。

我在这里更新了小提琴：http://jsfiddle.net/dag5ch26/7/

【讨论】：

嗯，有时我也希望能够按 Enter 键。
另一种解决方案是在keyup.enter 事件中将data 上的一些属性设置为true，并检查blur 事件中该值是否仍为true。如果是blur 事件中的true，则直接返回。我不太喜欢这个选项，因为这意味着您可以跟踪页面上的 x 个字段。您还必须确保以某种方式将值设置回false。（也许是setTimeout？感觉很老套）

【解决方案3】：

我不相信目前有办法做到这一点，尽管 v-on-many 将来会很好。

您可以在 created 生命周期处理程序期间自己在 JavaScript 中绑定事件处理程序。

类似于下面的内容（尽管 IMo 这可能比您当前的实现更糟糕）：

Component code {
    ...
    created() {
        window.addEventListener(‘click keyup’, function() {
    this.myComponentMethod(); }
    } }

【讨论】：