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 相关文章推荐
用 JavaScript 迁移目录
Dec 18 Javascript
jquery animate图片模向滑动示例代码
Jan 26 Javascript
解析John Resig Simple JavaScript Inheritance代码
Dec 03 Javascript
jquery Mobile入门—多页面切换示例学习
Jan 08 Javascript
jQuery Easyui实现左右布局
Jan 26 Javascript
ES6中如何使用Set和WeakSet
Mar 10 Javascript
浅析js的模块化编写 require.js
Dec 07 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
Apr 10 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
JavaScript实现精美个性导航栏筋斗云效果
Oct 29 Javascript
Vue Router的懒加载路径的解决方法
Jun 21 Javascript
Vue中强制组件重新渲染的正确方法
Jan 03 Vue.js
在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
[原创]PHP中通过ADODB库实现调用Access数据库之修正版本
2006/12/31 PHP
php之Memcache学习笔记
2013/06/17 PHP
Codeigniter发送邮件的方法
2015/03/19 PHP
图片img的src不变让浏览器重新加载实现方法
2013/03/29 Javascript
jQuery去掉字符串起始和结尾的空格(多种方法实现)
2013/04/01 Javascript
JS 使用for循环遍历子节点查找元素
2014/09/06 Javascript
jquery图片切换实例分析
2015/04/15 Javascript
JavaScript 判断对象中是否有某属性的常用方法
2018/06/14 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
2020/05/28 Javascript
vue中使用[provide/inject]实现页面reload的方法
2019/09/30 Javascript
简单实现节流函数和防抖函数过程解析
2019/10/08 Javascript
微信小程序开发摇一摇功能
2019/11/22 Javascript
微信小程序激励式视频广告组件使用详解
2019/12/06 Javascript
React实现轮播效果
2020/08/25 Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
2020/11/10 Javascript
Python的标准模块包json详解
2017/03/13 Python
Python 操作MySQL详解及实例
2017/04/30 Python
Python用for循环实现九九乘法表
2018/05/31 Python
Python中.join()和os.path.join()两个函数的用法详解
2018/06/11 Python
Django进阶之CSRF的解决
2018/08/01 Python
对python内置map和six.moves.map的区别详解
2018/12/19 Python
PyQt弹出式对话框的常用方法及标准按钮类型
2019/02/27 Python
Python实现的矩阵转置与矩阵相乘运算示例
2019/03/26 Python
Python DES加密实现原理及实例解析
2020/07/17 Python
详解python 支持向量机(SVM)算法
2020/09/18 Python
Pycharm 跳转回之前所在页面的操作
2021/02/05 Python
Dockers美国官方网站:卡其裤、男士服装、鞋及配件
2016/11/22 全球购物
新秀丽官方旗舰店:Samsonite拉杆箱、双肩包、皮具
2018/03/05 全球购物
西班牙在线光学:Visual-Click
2020/06/22 全球购物
高级编程求职信模板
2014/02/16 职场文书
会计师职业生涯规划范文
2014/02/18 职场文书
秋季校运动会广播稿
2014/02/23 职场文书
环保建议书作文500字
2015/09/14 职场文书
团队合作精神学习心得体会
2016/01/19 职场文书
详解如何修改nginx的默认端口
2021/03/31 Servers
Java后台生成图片的完整步骤
2021/08/04 Java/Android