vue 解除鼠标的监听事件的方法


Posted in Javascript onNovember 13, 2019

描述:在移动端中,我们的首页tab会缓存一些点击事件,比如在机构页面点开了下拉框==》在切换到赛事页面==》在切换回机构页面发现下拉款已经缓存了,是下拉的状态

1.

vue 解除鼠标的监听事件的方法

2.

vue 解除鼠标的监听事件的方法

3.

vue 解除鼠标的监听事件的方法

解决:每次滑动到别的页面的时候就需要解除绑定的点击事件

做法:

1- 首先给父盒子添加 指令:

v-click-outside="hideBox"

vue 解除鼠标的监听事件的方法

2- script标签中 自定义指令

// 自定义指令函数
const clickOutside = {
 // 初始化指令
 bind (el, binding, vnode) {
  function clickHandler (e) {
   // 这里判断点击的元素是否是本身,是本身,则返回
   if (el.contains(e.target)) {
    return false;
   }
   // 判断指令中是否绑定了函数
   if (binding.expression) {
    // 如果绑定了函数 则调用那个函数,此处binding.value就是handleClose方法
    binding.value(e);
   }
  }
  // 给当前元素绑定个私有变量,方便在unbind中可以解除事件监听
  el.__vueClickOutside__ = clickHandler;
  document.addEventListener('click', clickHandler);
 },
 update () { },
 unbind (el, binding) {
  // 解除事件监听
  document.removeEventListener('click', el.__vueClickOutside__);
  delete el.__vueClickOutside__;
 },
};

3-在export default 中注册自定义指令

// 注册自定义指令
 directives: { clickOutside },

4- 最后写上需要恢复下拉的参数

hideBox () {
   this.isSelect = false
   this.selectStatus = false
  },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
doctype后如何获得body.clientHeight的方法
Jul 11 Javascript
使用apply方法处理数组的三个技巧[译]
Sep 20 Javascript
cument.execCommand()用法深入理解
Dec 04 Javascript
js页面跳转的常用方法整理
Oct 18 Javascript
javascript与jquery中跳出循环的区别总结
Nov 04 Javascript
node.js中的fs.statSync方法使用说明
Dec 16 Javascript
jQuery鼠标事件汇总
Aug 30 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
Jan 04 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
Jun 06 Javascript
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
javascript如何使用函数random来实现课堂随机点名方法详解
Jul 28 Javascript
在vue+element ui框架里实现lodash的debounce防抖
Nov 13 #Javascript
element实现合并单元格通用方法
Nov 13 #Javascript
vue之debounce属性被移除及处理详解
Nov 13 #Javascript
Vue的click事件防抖和节流处理详解
Nov 13 #Javascript
vue表单数据交互提交演示教程
Nov 13 #Javascript
解决vuex数据异步造成初始化的时候没值报错问题
Nov 13 #Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
Nov 13 #Javascript
You might like
怎样在UNIX系统下安装php3
2006/10/09 PHP
php下使用无限生命期Session的方法
2007/03/16 PHP
一步一步学习PHP(4) php 函数 补充2
2010/02/15 PHP
PHP检查URL包含特定字符串实例方法
2019/02/11 PHP
让你的博文自动带上缩址的实现代码,方便发到微博客上
2010/12/28 Javascript
jquery 追加tr和删除tr示例代码
2013/09/12 Javascript
require.js深入了解 require.js特性介绍
2014/09/04 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
2015/11/07 Javascript
Bootstrap学习笔记之css样式设计(1)
2016/06/07 Javascript
JQuery之proxy实现绑定代理方法
2016/08/01 Javascript
vue组件实例解析
2017/01/10 Javascript
详解Vue.js项目API、Router配置拆分实践
2018/03/16 Javascript
javascript+HTML5 canvas绘制时钟功能示例
2019/05/15 Javascript
python分析apache访问日志脚本分享
2015/02/26 Python
Python中random模块用法实例分析
2015/05/19 Python
Python中特殊函数集锦
2015/07/27 Python
基于Python数据可视化利器Matplotlib,绘图入门篇,Pyplot详解
2017/10/13 Python
python分析作业提交情况
2017/11/22 Python
python装饰器-限制函数调用次数的方法(10s调用一次)
2018/04/21 Python
python实现Flappy Bird源码
2018/12/24 Python
Python基于matplotlib画箱体图检验异常值操作示例【附xls数据文件下载】
2019/01/07 Python
学习和使用python的13个理由
2019/07/30 Python
基于python3监控服务器状态进行邮件报警
2019/10/19 Python
Python如何实现强制数据类型转换
2019/11/22 Python
Baby Tulai澳大利亚:美国婴儿背带品牌
2018/10/15 全球购物
日本最大美瞳直送网:Morecontact(中文)
2019/04/03 全球购物
J2SDK1.5与J2SDK5.0有什么区别
2012/09/19 面试题
一套C#面试题
2013/10/09 面试题
Ajax请求总共有多少种Callback
2016/07/17 面试题
Java的类可以定义为Protected或者Private得吗
2015/09/25 面试题
大学校园生活自我鉴定
2014/01/13 职场文书
兰兰过桥教学反思
2014/02/08 职场文书
维稳承诺书
2015/01/20 职场文书
节水宣传标语口号
2015/12/26 职场文书
php访问对象中的成员的实例方法
2021/11/17 PHP
我去timi了,一起去timi是什么意思?
2022/04/13 杂记