I'm new to vue.js and trying to build a component which triggers a popup which will follow the mouse position when hovering over an element. The problem is that the mouse position is only logged when entering/leaving the element instead of everytime the mouse is moved within the element. How would I get this to work correctly?

<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>

I'm new to vue.js and trying to build a component which triggers a popup which will follow the mouse position when hovering over an element. The problem is that the mouse position is only logged when entering/leaving the element instead of everytime the mouse is moved within the element. How would I get this to work correctly?

<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>

• javascript
• vue.js
• vuejs2
• vue-component

• developer.mozilla.org/en-US/docs/Web/Events/mousemove – Jacob Goh Commented Aug 16, 2018 at 9:21

2 Answers 2

<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);
        }
    }
}

User native mousemove event --

<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);
        }
    }
}