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 动态添加事件代码
Nov 30 Javascript
jQuery.each()用法分享
Jul 31 Javascript
jquery获取特定name所有选中的checkbox,支持IE9标准模式
Mar 18 Javascript
JavaScript根据数据生成百分比图和柱状图的实例代码
Jul 14 Javascript
当某个文本框成为焦点时即清除文本框内容
Apr 28 Javascript
jQuery中extend函数详解
Feb 13 Javascript
Jquery实现纵向横向菜单
Jan 24 Javascript
学习使用bootstrap3栅格系统
Apr 12 Javascript
将html页面保存成图片,图片写入pdf的实现方法(推荐)
Sep 17 Javascript
详解处理bootstrap4不支持远程静态框问题
Jul 20 Javascript
微信公众号平台接口开发 获取access_token过程解析
Aug 14 Javascript
小程序实现录音功能
Sep 22 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
php下过滤HTML代码的函数
2007/12/10 PHP
php设计模式之观察者模式的应用详解
2013/05/21 PHP
PHP中把stdClass Object转array的几个方法
2014/05/08 PHP
jQuery powerFloat万能浮动层下拉层插件使用介绍
2010/12/27 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
2015/03/04 Javascript
动态加载jQuery的两种方法实例分析
2015/07/17 Javascript
JS+CSS实现滑动切换tab菜单效果
2015/08/25 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
2015/12/14 Javascript
jQuery mobile 移动web(4)
2015/12/20 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
2016/08/03 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
2016/09/20 Javascript
微信小程序侧边栏滑动特效(左右滑动)
2017/01/23 Javascript
使用Browserify来实现CommonJS的浏览器加载方法
2017/05/14 Javascript
基于jQuery实现的设置文本区域的光标位置
2018/06/15 jQuery
vue.js动画中的js钩子函数的实现
2018/07/06 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
2019/07/22 Javascript
[02:45]DOTA2英雄基础教程 伐木机
2013/12/23 DOTA
[59:08]Ti4 冒泡赛第二天 NEWBEE vs Titan 2
2014/07/15 DOTA
python中查找excel某一列的重复数据 剔除之后打印
2013/02/10 Python
Python基于PycURL自动处理cookie的方法
2015/07/25 Python
Python 数据处理库 pandas 入门教程基本操作
2018/04/19 Python
win10下tensorflow和matplotlib安装教程
2018/09/19 Python
解决python xlrd无法读取excel文件的问题
2018/12/25 Python
python 2.7 检测一个网页是否能正常访问的方法
2018/12/26 Python
利用pyuic5将ui文件转换为py文件的方法
2019/06/19 Python
将数据集制作成VOC数据集格式的实例
2020/02/17 Python
python GUI库图形界面开发之PyQt5多行文本框控件QTextEdit详细使用方法实例
2020/02/28 Python
Python爬取你好李焕英豆瓣短评生成词云的示例代码
2021/02/24 Python
局部内部类是否可以访问非final变量?
2013/04/20 面试题
求职信内容考虑哪几点
2013/10/05 职场文书
土木工程师岗位职责
2013/11/24 职场文书
实习鉴定范文
2013/12/19 职场文书
公司行政专员岗位职责
2014/08/24 职场文书
博士生专家推荐信
2014/09/26 职场文书
妈妈别哭观后感
2015/06/08 职场文书
《合作意向书》怎么写?
2019/08/20 职场文书