vue中的鼠标事件、鼠标滚轮事件、键盘事件。

vue中的鼠标事件、鼠标滚轮事件、键盘事件。

以下方法在底部代码中可参考···

鼠标事件

点击（单击）：@click="方法名" ；

           双击   ： @dblclick="方法名" ；

       鼠标按下： @mousedown="方法名" ；

       鼠标抬起： @mouseup="方法名" ；

       鼠标移动： @mousemove="方法名" ；

       鼠标离开： @mouseleave=“方法名” ；

       鼠标离开： @mouseout=“方法名” ；

 *mouseleave和mouseout的区别在于mouseout有冒泡行为。

       鼠标进入：  @mouseenter="方法名" ；

       鼠标进入：  @mouseover="方法名" 。

*mouseenter和mouseover的区别在于mouseover有冒泡行为。

 

鼠标滚轮事件

        滚轮滚动： @mousewheel="方法名" 。

 

键盘事件

@keydown（键盘按下时触发）

@keyup(键盘弹起)

@keypress(键盘按住时触发)

 

获取按键的键码 e.keyCode

方法后面跟keyCode值可以直接绑定键盘按键

 

@keyup.13     按回车键

@keyup.enter 回车

@keyup.up    上键

@keyup.down  下键

@keyup.left     左键

@keyup.right    右键

@keyup.delete    删除键

@keyup.space   空格

 

<template>

  <div>

    <h3>鼠标事件</h3>

    <div class="mouse-body">

      <b>click 鼠标单击</b>

      <div class="mouse-div" @click="click1"></div>

      <b>dblclick 鼠标双击</b>

      <div class="mouse-div" @dblclick="click2"></div>

      <b>mousedown 鼠标按下</b>

      <div class="mouse-div" @mousedown="click3"></div>

      <b>mouseup 鼠标抬起</b>

      <div class="mouse-div" @mouseup="click4"></div>

      <b>mousemove 鼠标移动</b>

      <div class="mouse-div" @mousemove="click5">{{num}}</div>

      <b>mouseleave 鼠标离开（leave）</b>

      <div class="mouse-div" @mouseleave="click6">

        {{num2}}

        <div style="width:50px;height:50px;border:1px blue solid"></div>

      </div>

      <b>mouseout 鼠标移出（out）这个离开包含了事件冒泡</b>

      <div class="mouse-div" @mouseout="click7">

        {{num3}}

        <div style="width:50px;height:50px;border:1px blue solid"></div>

      </div>

      <b>mouseenter 鼠标进入（enter）</b>

      <div class="mouse-div" @mouseenter="click8">

        {{num4}}

        <div style="width:50px;height:50px;border:1px blue solid"></div>

      </div>

      <b>mouseover 鼠标移入（over）这个移入包含了事件冒泡</b>

      <div class="mouse-div" @mouseover="click9">

        {{num5}}

        <div style="width:50px;height:50px;border:1px blue solid"></div>

      </div>

      <b>mousewheel 鼠标滑轮滚动</b>

      <div class="mouse-div" @mousewheel="click10"></div>

    </div>

 

    <h3>键盘事件</h3>

    <div>

      <input type="text" @keydown.space="key" />

    </div>

 

    <h3>事件修饰符</h3>

    <div>

      <input type="checkbox" @click.prevent="clickbox" />

    </div>

  </div>

</template>

 

<script>

export default {

  data() {

    return {

      num: "",

      num2: "",

      num3: "",

      num4: "",

      num5: ""

    };

  },

  methods: {

    click1() {

      console.log("鼠标单击");

    },

    click2() {

      console.log("鼠标双击");

    },

    click3() {

      console.log("鼠标按下");

    },

    click4() {

      console.log("鼠标抬起");

    },

    click5() {

      console.log("鼠标抬起");

      this.num++;

    },

    click6() {

      this.num2++;

    },

    click7() {

      this.num3++;

    },

    click8() {

      this.num4++;

    },

    click9() {

      this.num5++;

    },

    click10() {

      console.log(1111);

    },

    key(e) {

      console.log(e);

    },

    clickbox() {

      console.log("事件修饰符");

    }

  }

};

</script>

 

<style>

.mouse-body {

  display: flex;

  flex-direction: column;

  align-items: center;

}

.mouse-div {

  width: 200px;

  height: 200px;

  border: solid 1px red;

}

</style>