vue点击页面空白处实现保存功能


Posted in Javascript onNovember 06, 2019

vue点击页面空白处实现保存功能 

功能描述

双击表格一行实现表格编辑,点击空白处实现保存。

表格可编辑相关文章在可编辑表格

实现思路

当表格在编辑状态的时候在页面进行click监听,判断点击区域是否为编辑区域,如果不是编辑区域实现保存功能并取消click监听

功能点一:页面监听与取消接听

// 通过addEventListener与removeEventListener实现
document.addEventListener("click", function, false);
document.removeEventListener("click", function, false);

功能点二:判断点击区域是否为可编辑区域

该功能点有一定难度,首先你需要判断点击区域是否为表格区域,其次你要判断点击的区域是否为编辑状态的呢一行。所以我分为两步去实现

1、判断点击区域是否为表格区域

该功能点通过 contains 接口实现。判断条件为 tableDom.contains(target) ;该接口可以判断target是否为tableDom的子节点。

// 首先通过addEventListener 传入点击的dom区域
document.addEventListener(
 "click",
 e => {
  this.judgeClickDom(e);
 },
 false
 );
// this.bindClick是为了取消监听,下文会进行描述

// 判断点击是否为table区域
judgeClickDom(e) {
 const { target } = e;
 let tableDom = document.getElementsByClassName("table");
 
// getElementsByClassName获取到的是数组,一定要有下标不然会报错

// 如果我们点击的区域在表格外保存数据
 if (!tableDom[0].contains(target)) {
 this.saveTableData();
 }
},

2.判断点击区域是否为编辑状态的那一行

该功能借助了element框架, 如何标记编辑状态行,在可编辑表格中已有介绍

取消监听

由于我们监听click时使用的是箭头函数,没有函数名或者函数表达式,所以在取消监听的时候会出现问题。 我的解决方案是给他绑定一个全局变量bindClick。 代码如下

// 开始监听
document.addEventListener("click",
 (this.bindClick = e => {
  ...
 })
);

// 取消监听
document.removeEventListener("click", this.bindClick);

总结

以上所述是小编给大家介绍的vue点击页面空白处实现保存功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JavaScript监测ActiveX控件是否已经安装过的代码
Sep 02 Javascript
ExtJS 2.0 实用简明教程之布局概述
Apr 29 Javascript
深入理解javascript动态插入技术
Nov 12 Javascript
jQuery中bind,live,delegate与one方法的用法及区别解析
Dec 30 Javascript
jQuery标签替换函数replaceWith()的使用例子
Aug 28 Javascript
Javascript页面跳转常见实现方式汇总
Nov 28 Javascript
JQuery Mobile 弹出式登录框的实现方法
May 28 Javascript
EasyUI在表单提交之前进行验证的实例代码
Jun 24 Javascript
JavaScript同源策略和跨域访问实例详解
Apr 03 Javascript
微信小程序网络封装(简单高效)
Aug 06 Javascript
React router动态加载组件之适配器模式的应用详解
Sep 12 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
Oct 29 Javascript
vue  elementUI 表单嵌套验证的实例代码
Nov 06 #Javascript
微信小程序网络请求实现过程解析
Nov 06 #Javascript
vue 自定义右键样式的实例代码
Nov 06 #Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
Nov 06 #Javascript
vue 解决computed修改data数据的问题
Nov 06 #Javascript
微信小程序页面渲染实现方法
Nov 06 #Javascript
微信小程序页面间传递数组对象方法解析
Nov 06 #Javascript
You might like
暴雪前总裁遗憾:没尽早追赶Dota 取消星际争霸幽灵
2020/03/08 星际争霸
使用PHP获取网络文件的实现代码
2010/01/01 PHP
linux下使用crontab实现定时PHP计划任务失败的原因分析
2014/07/05 PHP
基于OpenCart 开发支付宝,财付通,微信支付参数错误问题
2015/10/01 PHP
Laravel框架数据库迁移操作实例详解
2020/04/06 PHP
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
2012/06/20 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
2014/08/24 Javascript
jQuery将多条数据插入模态框的示例代码
2014/09/25 Javascript
WEB前端设计师常用工具集锦
2014/12/09 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
2016/07/01 Javascript
原生js实现中奖信息无间隙滚动效果
2017/01/18 Javascript
ES6新特性之字符串的扩展实例分析
2017/04/01 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
2017/06/25 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
2019/04/29 Javascript
深入分析jQuery.one() 函数
2020/06/03 jQuery
[01:07:22]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG加赛
2014/05/26 DOTA
Python的math模块中的常用数学函数整理
2016/02/04 Python
用python与文件进行交互的方法
2018/03/01 Python
python实现支付宝当面付(扫码支付)功能
2018/05/30 Python
python3结合openpyxl库实现excel操作的实例代码
2018/09/11 Python
深入浅析Python科学计算库Scipy及安装步骤
2019/10/12 Python
基于django 的orm中非主键自增的实现方式
2020/05/18 Python
pytorch cuda上tensor的定义 以及减少cpu的操作详解
2020/06/23 Python
使用CSS3制作饼状旋转载入效果的实例
2015/06/23 HTML / CSS
利用HTML5实现使用按钮控制背景音乐开关
2015/09/21 HTML / CSS
德国Discount-Apotheke中文官网:DC德式康线上药房
2020/02/18 全球购物
本科生个人求职自荐信
2013/09/26 职场文书
大学生预备党员自我评价分享
2013/11/16 职场文书
研究生毕业鉴定
2014/01/29 职场文书
学校门卫管理制度
2014/01/30 职场文书
小学教师工作总结2015
2015/04/07 职场文书
交通肇事罪辩护词
2015/05/21 职场文书
2015年思想品德教学工作总结
2015/07/22 职场文书
体育委员竞选稿
2015/11/21 职场文书
Java 实战项目之家居购物商城系统详解流程
2021/11/11 Java/Android
什么是clearfix (一文搞清楚css清除浮动clearfix)
2023/05/21 HTML / CSS