如何让 mousemove 事件在 vue 组件中正常运行？答案

【问题标题】：How do I get the mousemove event to function correctly inside a vue component?如何让 mousemove 事件在 vue 组件中正常运行？
【发布时间】：2018-08-16 09:17:42
【问题描述】：

我是 vue.js 的新手，正在尝试构建一个组件来触发一个弹出窗口，当鼠标悬停在一个元素上时该弹出窗口将跟随鼠标位置。问题是鼠标位置仅在进入/离开元素时记录，而不是每次鼠标在元素内移动时记录。我怎样才能让它正常工作？

<template>
    <div>
        <div class="hover" @mouseenter="mouseEnter" @mouseleave="mouseLeave"></div>
        <div class="popup" v-if="popup">
            <slot></slot>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                popup: false
            }
        },
        methods: {
            mouseEnter() {
                console.log('mouseneter');
                this.popup = true;
                this.$el.addEventListener('mousemove', this.mouseMove());
            },
            mouseLeave() {
                console.log('mouseleave');
                this.popup = false;
                this.$el.removeEventListener('mousemove', this.mouseMove());
            },
            mouseMove() {
                console.log(event.clientX, event.clientY);
            }
        }
    }
</script>

<style lang="scss" scoped>
    .hover {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
    }

    .popup {
        position: absolute;
        top: 0;
        left: 100%;
    }
</style>

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/Events/mousemove

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

<template>
<div>
    <div class="hover" @mouseenter="mouseEnter" @mousemove="mousemove" @mouseleave="mouseLeave"></div>
    <div class="popup" v-if="popup">
        <slot></slot>
    </div>
</div>

<script>
export default {
    data() {
        return {
            popup: false
        }
    },
    methods: {
        mouseEnter(event) {
            console.log('mouseneter');
            this.popup = true;
            this.$el.addEventListener('mousemove', this.mouseMove, false);
        },
        mouseLeave(event) {
            this.popup = false;
            // this.$el.removeEventListener('mousemove', this.mouseMove());
        },
        mouseMove(event) {
            console.log(event.clientX, event.clientY);
        }
    }
}

【讨论】：

我遇到的问题是我使用括号来调用事件侦听器中的函数。我没有费心添加事件监听器，而是使用了 vue 提供的 @mousemove。谢谢！

【解决方案2】：

用户原生 mousemove 事件 --

<div>
    <div id="elementId" class="hover" @mouseenter="mouseEnter" @mousemove="mousemove" @mouseleave="mouseLeave"></div>
    <div id="popup" class="popup" v-if="popup">
        <slot></slot>
    </div>
</div>

export default {
    data() {
        return {
            popup: false
        }
    },
    mounted:function(){
      document.getElementById("elementId").addEventListener('mousemove', function(event){
        console.log(event.screenX + '-' + event.screenY);
        // change the position of popup here by changing top and left property -
        document.getElementById('popup').style.top = event.screenY+'px';
        document.getElementById('popup').style.left = event.screenX+'px';
      });
    },
    methods: {
        mouseEnter(event) {
            console.log('mouseneter');
            this.popup = true;
            this.$el.addEventListener('mousemove', this.mouseMove, false);
        },
        mouseLeave(event) {
            this.popup = false;
            // this.$el.removeEventListener('mousemove', this.mouseMove());
        },
        mouseMove(event) {
            console.log(event.clientX, event.clientY);
        }
    }
}

【讨论】：