vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作


Posted in Javascript onJuly 27, 2020

Vue 事件处理方法

可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。

v-on:click 单击事件

<button class=" btn btn-info" v-on:click="add(1)"> + + </button>

<button class=" btn btn-danger " v-on:click="subtract(1)"> - - </button>

v-on:dblclick 双击事件

<!-- 缩写语法 -->
<button class=" btn btn-info" @dblclick="add(5)"> + + </button>
<button class=" btn btn-danger " @dblclick="subtract(5)"> - - </button>

v-on:mousemove\mouseout 鼠标事件

<div class="canvas" @mouseout ="update">
  {{ x }} - {{ y }}
</div>
new Vue({
el:".vue-app",
 data:{
  age: 25,
 x:0,
 y:0
 },
 methods:{
 add:function(inc){
  this.age += inc;
 },
 subtract:function(dec){
  this.age -= dec ;
 },
 update:function(event){
 // console.log(event);
  this.x = event.offsetX;
  this.y = event.offsetY;
 }
 }
});

然而许多事件处理逻辑会更为复杂,所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。

Vue.js 事件修饰符

在事件处理程序中尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。

为了解决这个问题,Vue.js 为 v-on 提供了事件修饰符。之前提过,修饰符是由点开头的指令后缀来表示的。

.stop

.prevent

.capture

.self

.once

.passive

<!-- 阻止事件继续传播 -->
<p v-on:mousemove.stop> Stop </p>
 
<!-- 点击事件将只会触发一次 -->
<button class=" btn btn-info" v-on:click.once="add(1)"> + + </button>
 
 <!--点击 A 链接弹出提示内容,不再重载页面 -->
<p><a v-on:click.prevent ="alert() " href="http://blog.023xs.cn" rel="external nofollow" >blog.023xs.cn</a></p>

注意事项:使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 v-on:click.prevent.self 会阻止所有的点击,而 v-on:click.self.prevent 只会阻止对元素自身的点击。

Vue 按键修饰符

在监听键盘事件时,我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:

<!-- 用户输入内容时,按下Enter 键才会触发事件 -->
<input v-on:keyup.enter="Email" type="text" class="form-control" placeholder="Email">
 
<!-- 用户输入内容时,按下删除”或“退格”键 键才会触发事件 -->
<input v-on:keyup.delete="Email" type="text" class="form-control" placeholder="Email">

全部的按键别名:

.enter

.tab

.delete (捕获“删除”和“退格”键)

.esc

.space

.up

.down

.left

.right

记住所有的 keyCode 比较困难,所以 Vue 为最常用的按键提供了别名,当然也可以通过全局 config.keyCodes 对象自定义按键修饰符别名。

补充知识:vue给同一元素绑定单击click和双击事件dblclick,执行不同逻辑

在做项目过程中,需求是点击孔位单击弹出对话框查看产品总数,双击弹出对话框查看详情。一开始直接click和dblclick写在标签里面,但是不管怎么样,总是执行单击事件

解决办法:利用计时器,在大概时间模拟双击事件

html部分代码:

<div class="grid-content">
 <el-button 

v-for="(item,index) in items" :key="index" 

 @click="storageCount(item.id)" 

 @dblclick.native="storageDetail(item.id)" 

  class="inline-cell" 

 :class="colors[item.status]">
   {{item.id}}</el-button>
 </div>

.native主要用于监听组件根元素的原生事件,主要是给自定义的组件添加原生事件。

官方对.native修饰符的解释为:有时候,你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native

js部分代码

<script>
import desDialog from './dialog';
import detailDialog from './detailDialog';
var time = null; // 在这里定义time 为null 
export default {
 name: 'storeTable',
 components: {
 desDialog,
 detailDialog
 },
 props: ['providerid'],
 data() {
 return {
  colors: ['space', 'isBuy'],
  showDialog: false,
  showDialogT: false
 };
 },
 methods: {
// 单击事件函数
 storageCount(id) {
  clearTimeout(time); //首先清除计时器
  time = setTimeout(() => {
  this.showDialog = !this.showDialog; 
  const obj = {};
  obj.cutname = id;
  obj.providerid = this.providerid;
  this.$store.dispatch('GetStorageCount', obj);
  }, 300); //大概时间300ms
 },

// 双击事件函数,清除计时器,直接处理逻辑
 storageDetail(id) {
  clearTimeout(time); //清除
  this.showDialogT = !this.showDialogT;
  const obj = {};
  obj.cutname = id;
  obj.providerid = this.providerid;
  this.$store.dispatch('GetStorageDetail', obj);
 },
 close() {
  this.showDialog = false;
 },
 closeT() {
  this.showDialogT = false;
 }
 }
};
</script>

以上这篇vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
极酷的javascirpt,让你随意编辑任何网页
Feb 25 Javascript
javascript 自动转到命名锚记
Jan 10 Javascript
Javascript 类、命名空间、代码组织代码
Jul 31 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
Jul 20 Javascript
javascript中input中readonly和disabled区别介绍
Oct 23 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
Oct 08 Javascript
深入浅析JavaScript中的3DES
Aug 24 Javascript
使用微信小程序开发前端【快速入门】
Dec 05 Javascript
Angularjs添加排序查询功能的实例代码
Oct 24 Javascript
JavaScript判断浏览器运行环境的详细方法
Jun 30 Javascript
no-vnc和node.js实现web远程桌面的完整步骤
Aug 11 Javascript
微信小程序通过websocket实时语音识别的实现代码
Aug 19 Javascript
vue键盘事件点击事件加native操作
Jul 27 #Javascript
Element Cascader 级联选择器的使用示例
Jul 27 #Javascript
vue 通过绑定事件获取当前行的id操作
Jul 27 #Javascript
Element Rate 评分的使用方法
Jul 27 #Javascript
Element InputNumber计数器的使用方法
Jul 27 #Javascript
基于Vue中的父子传值问题解决
Jul 27 #Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
Jul 27 #Javascript
You might like
PHP&amp;MYSQL服务器配置说明
2006/10/09 PHP
基于数据库的在线人数,日访问量等统计
2006/10/09 PHP
php for 循环语句使用方法详细说明
2010/05/09 PHP
PHP中把有符号整型转换为无符号整型方法
2015/05/27 PHP
ecshop适应在PHP7的修改方法解决报错的实现
2016/11/01 PHP
firefox中JS读取XML文件
2006/12/21 Javascript
通过jquery实现tab标签浏览效果
2007/02/20 Javascript
基于jquery的无缝循环新闻列表插件
2011/03/07 Javascript
jQuery源码中的chunker 正则过滤符分析
2012/07/31 Javascript
使用Plupload实现直接上传附件至七牛云存储
2014/12/26 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
2015/01/24 Javascript
JS中改变this指向的方法(call和apply、bind)
2016/03/26 Javascript
JavaScript笔记之数据属性和存储器属性
2016/03/31 Javascript
最常用的jQuery表单验证(简单)
2017/05/23 jQuery
layui使用表格渲染获取行数据的例子
2019/09/13 Javascript
VUE实现图片验证码功能
2020/11/18 Javascript
axios如何取消重复无用的请求详解
2019/12/15 Javascript
JS函数基本定义与用法示例
2020/01/15 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
2020/05/26 Javascript
实例讲解Python中的私有属性
2014/08/21 Python
Python3.5编程实现修改IIS WEB.CONFIG的方法示例
2017/08/18 Python
python做量化投资系列之比特币初始配置
2018/01/23 Python
Python cookbook(数据结构与算法)让字典保持有序的方法
2018/02/18 Python
python+flask实现API的方法
2018/11/21 Python
配置 Pycharm 默认 Test runner 的图文教程
2018/11/30 Python
Python多继承以及MRO顺序的使用
2019/11/11 Python
Python实现爬取并分析电商评论
2020/06/19 Python
Python如何利用Har文件进行遍历指定字典替换提交的数据详解
2020/11/05 Python
阿里巴巴Oracle DBA笔试题答案-备份恢复类
2013/11/20 面试题
英语道歉信范文
2014/01/09 职场文书
父亲追悼会答谢词
2014/01/17 职场文书
项目申请汇报材料
2014/08/16 职场文书
元旦标语大全
2014/10/09 职场文书
学术研讨会主持词
2015/07/04 职场文书
golang elasticsearch Client的使用详解
2021/05/05 Golang
日元符号 ¥
2022/02/17 杂记