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 相关文章推荐
几个比较实用的JavaScript 测试及效验工具
Apr 18 Javascript
jquery无缝向上滚动实现代码
Mar 29 Javascript
javascript实现避免页面按钮重复提交
Jan 08 Javascript
JQuery中层次选择器用法实例详解
May 18 Javascript
浅谈javascript 函数表达式和函数声明的区别
Jan 05 Javascript
AngularJs表单验证实例详解
May 30 Javascript
javascript学习之json入门
Dec 22 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
Aug 16 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
微信接入之获取用户头像的方法步骤
Sep 23 Javascript
Vue实现附件上传功能
May 28 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
长波有什么东西
2021/03/01 无线电
拼音码表的生成
2006/10/09 PHP
php教程 插件机制在PHP中实现方案
2012/11/02 PHP
php中return的用法实例分析
2015/02/28 PHP
PHP生成和获取XML格式数据的方法
2016/03/04 PHP
PHP7 标准库修改
2021/03/09 PHP
javascript 动态table添加colspan\rowspan 参数的方法
2009/07/25 Javascript
JavaScript 定义function的三种方式小结
2009/10/16 Javascript
js工具方法弹出蒙版
2013/05/08 Javascript
教你在heroku云平台上部署Node.js应用
2014/07/30 Javascript
jQuery中parents()和parent()的区别分析
2014/10/28 Javascript
js获取当前时间显示在页面上并每秒刷新
2014/12/24 Javascript
jQuery选择器源码解读(一):Sizzle方法
2015/03/31 Javascript
javascript中对变量类型的判断方法
2015/08/09 Javascript
详解JavaScript数组的操作大全
2015/10/19 Javascript
JavaScript的Number对象的toString()方法
2015/12/18 Javascript
js流动式效果显示当前系统时间
2016/05/16 Javascript
JavaScript判断用户名和密码不能为空的实现代码
2016/05/16 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
2016/10/17 Javascript
Bootstrap框架实现广告轮播效果
2016/11/28 Javascript
JavaScript严格模式下关于this的几种指向详解
2017/07/12 Javascript
尝试自己动手用react来写一个分页组件(小结)
2018/02/09 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
2018/04/17 jQuery
vue router 用户登陆功能的实例代码
2019/04/24 Javascript
JQuery常见节点操作实例分析
2019/05/15 jQuery
Python中实现参数类型检查的简单方法
2015/04/21 Python
在Python的Django框架中为代码添加注释的方法
2015/07/16 Python
浅析Python编写函数装饰器
2016/03/18 Python
pytorch训练imagenet分类的方法
2018/07/27 Python
python flask web服务实现更换默认端口和IP的方法
2019/07/26 Python
new_zeros() pytorch版本的转换方式
2020/02/18 Python
Python远程linux执行命令实现
2020/11/11 Python
高级护理实习生自荐信
2013/09/28 职场文书
《中国梦我的梦》中学生演讲稿
2014/08/20 职场文书
2014大学生职业生涯规划书最新范文
2014/09/13 职场文书
简单的离婚协议书范本
2014/11/16 职场文书