为什么此事件侦听器会拾取添加之前发送的事件

时间:2019-04-25 13:13:32

标签: javascript vue.js

我有这个Vue JS代码。单击帐户<a>标记可使toggle方法运行。 toggle方法将事件侦听器添加到文档中,但是,一旦触发运行,事件侦听器便会触发并运行close,即使事件侦听器是由于事件而添加的,因此事件必须已经发生。为什么运行此事件以及如何在切换运行后立即使其不运行。仅应在第一次点击<a>标记后才能进行任何点击。

<template>
    <div>
        <a v-on:click="this.toggle">Account</a>
        <nav v-if="this.open">
            <a>Profile</a>
            <a>Settings</a>
            <a>Sign Out</a>
            <a>Admin</a>
        </nav>
    </div>
</template>

<script lang='ts'>
    import { Vue } from 'vue-property-decorator'

    export default Vue.extend({
        data: function () {
            return {
                open: false
            }
        },
        methods: {
            toggle: function () {
                this.open = !this.open
                if (this.open) {
                    // Add click listener to whole page to close dropdown
                    document.addEventListener('click', this.close)
                }
            },
            close: function () {
                console.log('test')
                this.open = false;
                document.removeEventListener('click', this.close)
            }
        }
    })
</script>

1 个答案:

答案 0 :(得分:1)

正如Chris G在评论中指出的那样,这是在添加了侦听器之后事件突然出现在文档中的事件。幸运的是,Vue使这变得容易。您可以将活动更改为v-on:click.stop="this.toggle"