Vue.js allow apply event on element:
<div id="app">
<button @click="play()">Play</button>
</div>
But how to apply event on window
object? it is not in DOM.
for example:
<div id="app">
<div @mousedown="startDrag()" @mousemove="move($event)">Drag me</div>
</div>
in this example, how to listen mousemove event on window
?
You should just do it manually during the creation and destruction of the component
...
created: function() {
window.addEventListener('mousemove',this.move);
},
destroyed: function() {
window.removeEventListener('mousemove', this.move);
}
...
Jeff's answer is perfect and should be the accepted answer. Helped me out a lot!
Although, I have something to add that caused me some headache. When defining the move
method it's important to use the function()
constructor and not use ES6 arrow function =>
if you want access to this
on the child component. this
doesn't get passed through to arrow functions from where it's called but rather referrers to its surroundings where it is defined. This is called lexical scope.
Here is my implementation with the called method (here called keyDown
instead of move
) included:
export default {
name: 'app',
components: {
SudokuBoard
},
methods: {
keyDown: function () {
const activeElement = document.getElementsByClassName('active')[0]
if (activeElement && !isNaN(event.key) && event.key > 0) {
activeElement.innerHTML = event.key
}
}
},
created: function () {
window.addEventListener('keydown', this.keyDown)
},
destroyed: function () {
window.removeEventListener('keydown', this.keyDown)
}
}
To be extra clear, The method below doesn't have access to this
and can't for example reach the data or props object on your child component.
methods: {
keyDown: () => {
//no 'this' passed. Can't access child's context
}
You can also use the vue-global-events library.
<GlobalEvents @mousemove="move"/>
It also supports event modifiers like @keydown.up.ctrl.prevent="handler"
.
This is for someone landed here searching solution for nuxt.js
:
I was creating sticky header for one of my projects & faced issue to make window.addEventListener
work.
First of all, not sure why but window.addEventListener
doesn't work with created
or beforeCreate
hooks, hence I am using mounted
.
<template lang="pug">
header(:class="{ 'fixed-header': scrolled }")
nav menu here
</template>
<script>
export default {
name: 'AppHeader',
data() {
return { scrolled: false };
},
mounted() {
// Note: do not add parentheses () for this.handleScroll
window.addEventListener('scroll', this.handleScroll);
},
methods: {
handleScroll() {
this.scrolled = window.scrollY > 50;
},
},
};
</script>
I found that using window.addEventListener
no longer worked as I expected with Vue 3. It appears that the function is wrapped by Vue now. Here's a workaround:
...
created()
{
document.addEventListener.call(window, "mousemove", event =>
{
...
});
}
...
The important part is document.addEventListener.call(window
, what we're doing is to take the unwrapped addEventListener
from document
and then call it on the window
Object.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.