Vue鼠标点击事件和键盘事件

这篇具有很好参考价值的文章主要介绍了Vue鼠标点击事件和键盘事件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

Vue中的鼠标点击事件修饰符:

vue的@click.prevent

vue的@click.stop

vue的@click.capture

vue的@click.once

vue的@click.self

vue的@click.passive

 vue的键盘相应事件

@keydown - 按下键盘上的任意一个键时触发的事件。

@keyup - 松开键盘上的任意一个键时触发的事件。

@keypress - 当按下字符键时触发的事件。

@keydown.[key] - 当按下特定键时触发的事件,可以通过键名进行绑定。

@keyup.[key] - 当松开特定键时触发的事件,可以通过键名进行绑定。

@keydown.[key].prevent - 当按下特定键时阻止默认行为,可以通过 prevent 修饰符实现。


Vue中的鼠标点击事件修饰符:

  • 1.prevent:阻止默认事件(常用);
  • 2. stop:阻止事件冒泡(常用);
  • 3.once:事件只触发一次(常用);
  • 4.capture:使用事件的捕获模式;
  • 5.self:只有event.target是当前操作的元素时才触发事件;
  • 6.passive:事件的默认行为立即执行,无需等待事件回调执行完毕;

vue的@click.prevent

@click.prevent 是 Vue 中的一个事件修饰符,用于阻止浏览器默认行为和事件冒泡。

在 Vue 组件中,当你使用 @click.prevent 修饰符时,Vue 会在触发 click 事件时调用事件处理程序,并且会使用 event.preventDefault() 方法阻止浏览器默认行为。例如,当你在一个链接上添加 @click.prevent 修饰符时,点击该链接不会导致浏览器跳转到链接的目标页面,而是只会调用事件处理程序。

此外,当你使用 @click.prevent 修饰符时,Vue 还会使用 event.stopPropagation() 方法阻止事件冒泡。这意味着,当你在一个具有嵌套结构的组件中添加 @click.prevent 修饰符时,如果你点击一个子组件,事件处理程序不会被传递到父组件中。只有当你在具有该修饰符的元素上直接点击时,才会触发事件处理程序。

例如,如果你在一个表单提交按钮上添加 @click.prevent 修饰符,点击该按钮不会导致表单提交,而只会调用事件处理程序。这对于需要在按钮被点击时进行一些自定义逻辑或者异步提交表单的情况非常有用。

vue的@click.stop

在Vue中,可以使用@click.stop来阻止事件冒泡。

事件冒泡是指事件从嵌套元素中的最深处向外传递的过程。当一个元素上触发了事件,它会向上冒泡到其父元素,直到传递到文档的根元素。这意味着在子元素上触发的事件也会在其祖先元素上触发。

如果你想阻止事件从子元素冒泡到父元素,可以在子元素上使用@click.stop指令。例如,下面的代码将阻止child元素的click事件冒泡到parent元素:

<div @click="parent">
  <div @click.stop="child"></div>
</div>

在这个例子中,当用户点击child元素时,parent方法不会被调用,因为@click.stop阻止了事件冒泡到parent元素。

vue的@click.capture

@click.capture 是 Vue 中的一个事件修饰符,用于在触发事件时捕获所有的冒泡事件。

事件捕获和事件冒泡是两种不同的事件传播方式。在事件捕获阶段,事件从顶层元素逐级向下传递到目标元素;在事件冒泡阶段,事件从目标元素逐级向上传递到顶层元素。默认情况下,Vue 组件中的事件处理程序只会在事件冒泡阶段被调用。

当你使用 @click.capture 修饰符时,Vue 会在事件捕获阶段调用事件处理程序,而不是在事件冒泡阶段。这意味着事件处理程序将在子组件之前调用,而不是在子组件之后调用。

例如,如果你在一个包含多个子组件的组件上添加 @click.capture 修饰符,那么当你点击子组件时,事件处理程序将首先在父组件中被调用,然后才会在子组件中被调用。

这个修饰符通常用于需要在父组件中拦截事件并进行一些处理的情况,例如在组件外部点击时关闭下拉菜单。

vue的@click.once

@click.once 是 Vue 中的一个事件修饰符,用于绑定一个只会触发一次的点击事件处理程序。

当你在一个元素上添加 @click.once 修饰符时,Vue 会在该元素被点击一次时调用事件处理程序,并立即将该修饰符从事件中删除。这意味着,当你再次点击该元素时,不会再触发事件处理程序。

例如,你可以在一个打开对话框的按钮上添加 @click.once 修饰符,以确保对话框只会被打开一次。当用户再次点击该按钮时,不会再次打开对话框。

需要注意的是,@click.once 修饰符只会在绑定的元素上生效,如果该元素有子元素,并且你点击了其中一个子元素,那么该子元素的点击事件处理程序也会被触发。如果你希望只在点击该元素本身时触发事件处理程序,可以使用 @click.self.once 修饰符。

vue的@click.self

@click.self 是 Vue 中的一个事件修饰符,用于绑定一个只有在点击元素本身时才会触发的点击事件处理程序。

在 Vue 组件中,当你使用 @click.self 修饰符时,Vue 会在触发 click 事件时调用事件处理程序,但是只有当你直接点击该元素本身时才会触发。如果你点击该元素的子元素,事件处理程序不会被触发。

例如,当你在一个具有嵌套结构的组件中,需要在点击组件本身时进行一些自定义逻辑,而在点击组件内部的某个子元素时不进行任何操作时,你可以使用 @click.self 修饰符。

需要注意的是,@click.self 修饰符只会在绑定的元素上生效,如果该元素有子元素,并且你点击了其中一个子元素,那么该子元素的点击事件处理程序也会被触发。如果你希望只在点击该元素本身时触发事件处理程序,并且忽略子元素的点击事件处理程序,可以使用 @click.prevent@click.stop 修饰符。

vue的@click.passive

@click.passive 修饰符可以在 Vue 组件中用于优化 click 事件的性能。下面是一个使用 @click.passive 修饰符的示例:

<template>
  <div @click="handleClick" @click.passive="handleClickPassive">Click me</div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('Clicked!');
      // 阻止默认行为
      event.preventDefault();
    },
    handleClickPassive() {
      console.log('Clicked (passive)!');
    }
  }
}
</script>

在这个示例中,当你在 div 元素上点击时,会触发两个事件处理程序:handleClickhandleClickPassivehandleClick 方法会调用 event.preventDefault() 方法阻止默认行为,而 handleClickPassive 方法则使用了 @click.passive 修饰符告知浏览器该事件处理程序不会调用 event.preventDefault() 方法。

由于使用了 @click.passive 修饰符,浏览器可以在处理 click 事件时进行一些性能优化,从而提高性能和响应速度。

 vue的键盘相应事件

当我们在 Vue.js 中处理键盘事件时,通常需要使用以下几种键盘事件:

  1. @keydown - 按下键盘上的任意一个键时触发的事件。

<template>
  <div @keydown="onKeyDown"></div>
</template>

<script>
export default {
  methods: {
    onKeyDown(event) {
      console.log('KeyDown event:', event.key);
    }
  }
}
</script>
  1. @keyup - 松开键盘上的任意一个键时触发的事件。

<template>
  <div @keyup="onKeyUp"></div>
</template>

<script>
export default {
  methods: {
    onKeyUp(event) {
      console.log('KeyUp event:', event.key);
    }
  }
}
</script>
  1. @keypress - 当按下字符键时触发的事件。

<template>
  <div @keypress="onKeyPress"></div>
</template>

<script>
export default {
  methods: {
    onKeyPress(event) {
      console.log('KeyPress event:', event.key);
    }
  }
}
</script>
  1. @keydown.[key] - 当按下特定键时触发的事件,可以通过键名进行绑定。

<template>
  <div @keydown.enter="onEnterKeyDown"></div>
</template>

<script>
export default {
  methods: {
    onEnterKeyDown() {
      console.log('Enter key is pressed!');
    }
  }
}
</script>
  1. @keyup.[key] - 当松开特定键时触发的事件,可以通过键名进行绑定。

<template>
  <div @keyup.enter="onEnterKeyUp"></div>
</template>

<script>
export default {
  methods: {
    onEnterKeyUp() {
      console.log('Enter key is released!');
    }
  }
}
</script>
  1. @keydown.[key].prevent - 当按下特定键时阻止默认行为,可以通过 prevent 修饰符实现。

<template>
  <div @keydown.enter.prevent></div>
</template>

以上是常用的键盘事件,你可以根据实际需求进行选择和使用。在代码中,我们可以通过 event 参数来获取键盘事件的相关信息,如按下的键的名称、keyCode 码等等。通过键盘事件,我们可以实现一些常见的交互操作,例如:表单验证、搜索提示等等。文章来源地址https://www.toymoban.com/news/detail-461034.html

到了这里,关于Vue鼠标点击事件和键盘事件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue监听鼠标与键盘事件

     效果:  

    2024年02月16日
    浏览(40)
  • Javascript 、Vue —— 禁止鼠标右键点击事件!

    工作中碰见了奇葩的需求(见多了,也就不奇葩了哈哈)—— 用户让加上鼠标右键点击事件 1、oncontextmenu 事件 定义 : oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单。 HTML :  JavaScript :  JavaScript 中, 使用 addEventListener() 方法:   注意:  Internet Explorer 8 及更早

    2024年02月07日
    浏览(50)
  • 关于使用C#调用Win32API,抓取第三方句柄,模拟鼠标点击,键盘发送事件(C2Prog.exe)

    因为最近工作需要用就把基本知识整理了一下 主要操作这个软件写程序和选配置   下面例子和Win32以及自己封装的库全在工程文件里面 2023.7.10 :以前写的代码丢了重新写了一下优化了不少 ,所以特此更新一下 以前是1.7的版本目前用的是1.9版本有些不一样需要注意  这里放最新

    2024年02月14日
    浏览(52)
  • vue+openlayers,初始化openlayers地图,实现鼠标移入、点击、右键等事件

    主要功能:初始化openlayers地图,实现鼠标移入、点击、右键等事件,以及获取当前图标的feature,将当前图标信息以弹框方式进行展示;地图上展示拾取到的经纬度 前端使用的是vue技术栈 步骤一:将地图的公用配置项单独提出成一个js文件,方便打包后进行修改,代码如下

    2024年02月11日
    浏览(40)
  • Vue的鼠标键盘事件 pinia和vuex的区别 Vuex 和 Pinia 的优缺点

    鼠标事件(将v-on简写为@) 键盘事件 输入框事件 但是element-ui在实际使用时,前四条触发方法全部都是input方式( 在 Input 值改变时触发 )触发,遂使用原生的@blur才完成效果 表单输入相关修饰符  .lazy     input 输入完毕时 .number   input只获取数字类型的输入 .trim   去除用户输入中

    2024年02月12日
    浏览(44)
  • Vue中 如何监听键盘事件中的按键

    在Web前端开发中,键盘事件的处理是非常常见的需求之一。而在Vue框架中,如何监听键盘事件中的按键是一个相对简单但又很实用的功能。本文将为你介绍如何在Vue中监听键盘事件,并演示一些常用的按键操作。 首先,在Vue中监听键盘事件的方式有两种:一种是直接在DOM元素

    2024年02月20日
    浏览(41)
  • vue+echarts 实现地图tooltip点击事件;toolTip数据动态渲染;同时鼠标滑过涟漪点时实现地图多区域联动

    最终做出来的效果是这样的: 最近做项目时,遇到这样的需求:         1、toolTip上的数据根据后台动态渲染         2、鼠标移入地图涟漪点时显示tootTip,点击toolTip上的文字,携带动态数据id进行路由跳转         3、鼠标移入地图涟漪点,与涟漪点相关的省份多区域联动

    2024年02月09日
    浏览(55)
  • 键盘怎么控制鼠标?键盘控制鼠标实现点击和移动

    鼠标在电脑操作过程中非常重要,可是有时遇到尴尬的问题,就是摸鱼的时候觉得一直点击鼠标声音太大,或者舍友都睡觉了,你突然之间需要浏览一些网页,一直点击鼠标会产生很大的噪声,这时候该怎么办呢?如果你是笔记本,配合鼠标版可以解决。如果你正好有一个静

    2024年02月06日
    浏览(54)
  • Qt鼠标点击事件处理:显示鼠标点击位置(完整示例)

    Qt 入门实战教程(目录) 前驱文章: Qt Creator 创建 Qt 默认窗口程序(推荐) 事件是对各种应用程序需要知道的由应用程序内部或者外部产生的事情或者动作的通称。 例如点击鼠标,按下按键。 在Qt中使用一个对象来表示一个事件,它继承自QEvent类。 如鼠标事件(例如点击

    2024年02月10日
    浏览(55)
  • python 模拟鼠标,键盘点击

    https://www.cnblogs.com/tobe-goodlearner/p/tutorial-pynput.html 信息爆炸 可用于抢红包,直播点击爱心,等等需要点击操作的应用场景

    2024年02月11日
    浏览(58)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包