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 相关文章推荐
关于jquery动态增减控件的一些想法和小插件
Aug 01 Javascript
通过实例理解javascript中没有函数重载的概念
Jun 03 Javascript
使用vue.js开发时一些注意事项
Apr 27 Javascript
用js读写cookie的简单方法(推荐)
Aug 08 Javascript
JS实现Ajax的方法分析
Dec 20 Javascript
jQuery实现拖动剪裁图片作为头像
Dec 28 Javascript
Vuex之理解Getters的用法实例
Apr 19 Javascript
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
js+html5 canvas实现ps钢笔抠图
Apr 28 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
Oct 21 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
May 09 Javascript
vue element ui validate 主动触发错误提示操作
Sep 21 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 5昨天隆重推出--PHP 5/Zend Engine 2.0新特性
2006/10/09 PHP
随机广告显示(PHP函数)
2006/10/09 PHP
PHP 加密/解密函数 dencrypt(动态密文,带压缩功能,支持中文)
2009/01/30 PHP
基于PHP创建Cookie数组的详解
2013/07/03 PHP
Thinkphp批量更新数据的方法汇总
2016/06/29 PHP
javascript 动态加载 css 方法总结
2009/07/11 Javascript
javascript高级学习笔记整理
2011/08/14 Javascript
js 窗口抖动示例
2013/09/04 Javascript
jQuery动态星级评分效果实现方法
2015/08/06 Javascript
javascript用正则表达式过滤空格的实现代码
2016/06/14 Javascript
nodejs入门教程一:概念与用法简介
2017/04/24 NodeJs
详解create-react-app 自定义 eslint 配置
2018/06/07 Javascript
在Vue-cli里应用Vuex的state和mutations方法
2018/09/16 Javascript
vue-cli 首屏加载优化问题
2018/11/06 Javascript
Bootstarp在pycharm中的安装及简单的使用方法
2019/04/19 Javascript
js 将线性数据转为树形的示例代码
2019/05/28 Javascript
如何使用JavaScript实现栈与队列
2019/06/24 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
2019/08/27 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
2020/12/04 Javascript
Python增量循环删除MySQL表数据的方法
2016/09/23 Python
Python实现判断一个字符串是否包含子串的方法总结
2017/11/21 Python
Python打印输出数组中全部元素
2018/03/13 Python
python字符串与url编码的转换实例
2018/05/10 Python
python xlsxwriter创建excel图表的方法
2018/06/11 Python
Python 70行代码实现简单算式计算器解析
2019/08/30 Python
Python中输入和输出(打印)数据实例方法
2019/10/13 Python
Python3之外部文件调用Django程序操作model等文件实现方式
2020/04/07 Python
python绘图pyecharts+pandas的使用详解
2020/12/13 Python
Python实现对word文档添加密码去除密码的示例代码
2020/12/29 Python
玩具反斗城美国官网:Toys"R"Us
2016/09/17 全球购物
mysql_pconnect()和mysql_connect()有什么区别
2012/05/25 面试题
宝宝周岁宴答谢词
2014/01/26 职场文书
室内设计专业自荐信
2014/05/31 职场文书
求职教师自荐书
2014/06/19 职场文书
《圆的面积》教学反思
2016/02/19 职场文书
如何书写读后感?(附范文)
2019/07/26 职场文书