Question

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

我又如何避免通过调用hideField（）函数重复两次自己。我只能叫一次（bur或key.enter）吗？

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

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

Answer 1

鉴于您的示例的局限性，我认为没有必要像您一样在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/

Answer 2

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

您可以在创建的生命周期处理程序期间将自己的事件处理程序绑定到JavaScript中。

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

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

Answer 3

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

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

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

3 个答案: