[Vuejs]-Vue.js: How to get the offsetX from the "currentTarget" when mouse moving over its child elements?

by

1👍

First you need to define translateX in data object:

data: function() {
    return {
      translateX: Number
    }
}

And in onMouseMove method set translateX value equal to event.offsetX value:

methods: {
    onMouseMove: function(event) {     
      this.translateX = event.offsetX
    }
}

Now is this variable available in you template and it is reactive. Every time you mouseover div.synonym-list-wrapper element, it would trigger method and update transformX value.

Note:
add .self to @mousemove:

@mousemove.self="onMouseMove($event)"

It will only trigger handler if event.target is the element itself (not from a child element)

Here is working example:
jsFiddle

👤t_dom93

-1👍

event.currentTarget may be what you want:

It always refers to the element to which the event handler has been attached, as opposed to event.target which identifies the element on which the event occurred.

👤JJPandari

Leave a comment