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 相关文章推荐
js 获取class的元素的方法 以及创建方法getElementsByClassName
Mar 11 Javascript
js判断背景图片是否加载成功使用img的width实现
May 29 Javascript
js控制input输入字符解析
Dec 27 Javascript
JavaScript中的console.trace()函数介绍
Dec 29 Javascript
js全选按钮的实现方法
Nov 17 Javascript
javascript绘制漂亮的心型线效果完整实例
Feb 02 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
Sep 20 Javascript
jQuery实现图片滑动效果
Mar 08 Javascript
BootStrap导航栏问题记录
Jul 31 Javascript
微信小程序使用Promise简化回调
Feb 06 Javascript
vue嵌套路由与404重定向实现方法分析
May 04 Javascript
基于Vue实现微信小程序的图文编辑器
Jul 25 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
2006/12/14 PHP
推荐5款跨平台的PHP编辑器
2014/12/25 PHP
php5.3不能连接mssql数据库的解决方法
2014/12/27 PHP
Yii2――使用数据库操作汇总(增删查改、事务)
2016/12/19 PHP
枚举JavaScript对象的函数
2006/12/22 Javascript
JavaScript 获取当前时间戳的代码
2010/08/05 Javascript
jquery下实现overlay遮罩层代码
2010/08/25 Javascript
加速IE的Javascript document输出的方法
2010/12/02 Javascript
jquery实现点击TreeView文本父节点展开/折叠子节点
2013/01/10 Javascript
解决js中window.open弹出的是上次的缓存页面问题
2013/12/29 Javascript
js/jquery获取文本框输入焦点的方法
2014/03/04 Javascript
js实现简单秒表走动的时钟特效
2020/03/25 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
2015/10/23 Javascript
在javascript中使用com组件的简单实现方法
2016/08/17 Javascript
jQuery中Datatables增加跳转到指定页功能
2017/02/08 Javascript
jQuery插件zTree实现删除树子节点的方法示例
2017/03/08 Javascript
JS判断时间段的实现代码
2017/06/14 Javascript
EasyUI中的dataGrid的行内编辑
2017/06/22 Javascript
使用JS组件实现带ToolTip验证框的实例代码
2017/08/23 Javascript
angular2路由之routerLinkActive指令【推荐】
2018/05/30 Javascript
我所理解的JavaScript中的this指向
2020/09/04 Javascript
JS如何生成动态列表
2020/09/22 Javascript
[01:00:04]DOTA2上海特级锦标赛B组小组赛#1 Alliance VS Spirit第二局
2016/02/26 DOTA
浅谈pytorch和Numpy的区别以及相互转换方法
2018/07/26 Python
Python中PyQt5/PySide2的按钮控件使用实例
2019/08/17 Python
python 实现图片批量压缩的示例
2020/12/18 Python
html5移动端自适应布局的实现
2020/04/15 HTML / CSS
美国大尺码女装零售商:TORRID
2016/10/01 全球购物
曼联官方网上商店:Manchester United Direct
2017/07/28 全球购物
Theo + George官方网站:都柏林时尚品牌
2019/04/08 全球购物
考试退步检讨书
2014/01/15 职场文书
秋季运动会通讯稿
2014/01/24 职场文书
2014年国培研修感言
2014/03/09 职场文书
八达岭长城导游词
2015/01/30 职场文书
外国人来华邀请函
2015/01/31 职场文书
建议书的格式及范文
2015/09/14 职场文书