javascript - blur事件取消vue组件中的点击事件

Question

我在 Vue.js 中有一个搜索组件。当您在文本输入中键入内容时，将从服务器获取搜索结果列表，然后显示在搜索字段下方的列表中。单击其中一个结果时，提交 事件将触发。

但是，现在我尝试向文本输入添加一个模糊事件，当用户点击离开输入时应该隐藏结果列表。这工作正常，除了一种关键情况 - 单击结果不再触发 submit 事件。

我明白这是为什么 - blur 事件显然在 click 事件之前触发，并在点击可以在其中一个结果上注册之前隐藏结果列表。我的问题是，我该如何解决这个问题？我需要在文本输入外部单击时关闭结果列表，但显然我还需要 submit 方法才能运行。

这是完整的组件:

<template>
    <div class="search basic-search">
        <input type="text" v-model="search_string" v-on:keyup="search" v-on:focus="activate" v-on:blur="inactivate" class="form-control search" placeholder="Search stocks" />
        <div :class="['search-results', active === true ? 'active' : '']">
            <div class="search-result" v-for="result in search_results" v-on:click="submit(result.id)">
                {{ result.name }} ({{ result.ticker }})
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data: function() {
            return {
                search_string : '',
                search_results : [],
                active : false
            };
        },

        methods : {
            search : function() {
                const axios_data = {
                    _token  : $('meta[name="csrf-token"]').attr('content'),
                    str : this.search_string
                };

                axios.post('/stock-search', axios_data).then(response => {

                    if(response.data.success){
                        this.search_results = response.data.stocks;
                        this.active = true;
                    }

                });
            },

            activate : function() {
                if(this.search_string !== '')
                    this.active = true;
            },

            inactivate : function() {
                this.active = false;
            },

            submit : function(stock_id) {
                document.location = "/graphs/" + stock_id;
            }
        }
    }
</script>

Answer 1

您可以延迟隐藏框，直到 click 触发

inactivate : function() {
   setTimeout( () => this.active = false, 100)
},

您也可以尝试使用 mousedown 而不是 click

<div class="search-result" v-for="result in search_results" v-on:mousedown="submit(result.id)">

我不知道事件的顺序是否确定，但是mousedown应该在blur之前触发。