vue监听用户点击区域

在这里插入图片描述

<template>
  <div>
    <div>
      <h3>事件</h3>
      <div>
        <!-- 有括号,有参数打印参数 -->
        <button @click="clickcount(0)">小区域0</button>
        <!-- 没有括号弹出事件对象 -->
        <button @click="clickcount1">小区域1</button>
        <!-- 两个参数 -->
        <button @click="clickcount2('something1', $event)">小区域2</button>
      </div>
    </div>
    <div>
      <h3>事件修饰符号</h3>
      <a href="http://www.luichun.cn">单纯连接</a>
      <br />
      <!-- 完成Aclick事件后再进行跳转 -->
      <a href="http://www.luichun.cn" @click="Aclick"
        >完成Aclick事件后再进行跳转</a
      >
      <br />
      <!-- 点击后不会再进行跳转 -->
      <a href="http://www.luichun.cn" @click.prevent="Aclick"
        >点击后不会再进行跳转</a
      >
    </div>
    <div><h3>冒泡事件</h3></div>
    <div>
      <h3>div里面没有事件,点击只会触发按钮里面的点击事件</h3>
      <div style="width: 150px; height: 100px; background-color: blue">
        <button @click="clickcount(0)">按钮</button>
      </div>
      <h3>内部的按钮,点击了之后会点击两个区域</h3>
      <div
        style="width: 150px; height: 100px; background-color: blue"
        @click="clickcount1(1)"
      >
        <button @click="clickcount(0)">按钮</button>
      </div>
      <h3>阻止冒泡事件,只是执行按钮的事件</h3>
      <div
        style="width: 150px; height: 100px; background-color: blue"
        @click="clickcount1(1)"
      >
        <button @click.stop="clickcount(0)">按钮</button>
      </div>
      <div>
        <h3>监听回车</h3>
        <input type="text" @keyup.enter="enterkey" />
      </div>
      <div>
        <h3>监听输入</h3>
        <input type="text" @keyup="enterkey1" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TestEvent",
  methods: {
    clickcount(something) {
      console.log(something);
    },
    clickcount1(something) {
      console.log(something);
    },
    clickcount2(something, event) {
      console.log(something);
      console.log(event);
    },
    Aclick() {
      alert(0);
    },
    enterkey(event) {
      console.log(event["keyCode"]);
    },
    enterkey1() {
      alert("输入了");
    },
  },
};
</script>

<style>
</style>
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页