Add Vue.js event on window

问题

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 ?

回答1:

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

回答2:

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 
      }

回答3:

You can also use the vue-global-events library.

<GlobalEvents @mousemove="move"/>

It also supports event modifiers like @keydown.up.ctrl.prevent="handler".

回答4:

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>

来源：https://stackoverflow.com/questions/36993834/add-vue-js-event-on-window

标签

javascript

Vue.js

dom-events