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

2024-11-30 13:31:03

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

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

做法：

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

v-click-outside="hideBox"

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
  },

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

vue鼠标悬停事件实例详解

具体代码如下所述: v-bind:title="message" <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue实例化</title> </head> <script src="https://cdn.jsdelivr.net/npm/vue/dis
Vue.js鼠标悬浮更换图片功能

最近自己做的项目中设计师要求分类栏中鼠标悬停更换图片,大致实现出来的效果就是这样: 这个在jQuery中是个很简单的事,但是在vue中我还是第一次实现. 首先将所有的选中后图片都覆盖到没选中图片上 html代码如下 <ul> <li> <a href=""> <img src="../../../img/goods/study.png" alt="学习"> <img class="h
vue2.0获取鼠标位置的方法

如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.js" ></script> <style> #canvas{ width: 500px; height:
vue 使用鼠标滚动加载数据的例子

关于用鼠标滚动到某个位置我们就去加载数据,这样的场景与业务需求现在越来越常见,现在来分析下<vue.js 实战>中作者的一个解决策略: 1. 设置一个标志位用来判断数据是否在加载中 2. 将滚动区域设置成 overfow:auto(显示滚动条) 3. 给滚动区域加入监听事件并绑定ref属性来获取DOM实例 4. 当鼠标滚动到底部时,加载数据 4.1 如果此时标志位为true则直接退出,不进行此时数据加载关键代码如下: <template> //...代码省略 //该div
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)

今天用vue+原生js的mousemove事件,写了个拖动,发现只能慢慢拖动才行,鼠标只要移动快了,就失效,不能拖动了: 搞了半天在,总算解决了,但是问题的深层原理还没搞清楚,知道的大侠可以留言分享,下面直接上代码: 只能慢速拖动的代码: <!DOCTYPE html> <html> <head> <title>vue结合原生js实现拖动</title> <script src="https://cdn.bootcss.com/v
vue实现鼠标经过动画

本文实例为大家分享了vue实现鼠标经过动画的具体代码,供大家参考,具体内容如下详细代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <div class="box"> <div class="boxchilde" @mouseenter="flag=true" @mouseleave="fla
vue实现鼠标移入移出事件代码实例

本文实例为大家分享了vue实现鼠标移入移出事件的具体代码,供大家参考,具体内容如下 <div class="index_tableTitle clearfix" v-for="(item,index) in table_tit"> <div class="indexItem"> <span :title="item.name">{{item.name}}</span> <s
基于vue中对鼠标划过事件的处理方式详解

鼠标事件进行监听需求中,在一个table(组件)表中,对于其中一列(该列为图片列),当鼠标划过该列的某个单元格子(图片)时,需要展示出该单元格子对应的遮罩层翻阅了一些博客,发现好多都提到了mouse事件,如mouseover.mouseout.mouseenter.mouseleave,在之后我自己也通过这种方法进行了尝试. <template> <el-table :data="tableData" stripe style="width: 100%&
vue 解除鼠标的监听事件的方法

描述:在移动端中,我们的首页tab会缓存一些点击事件,比如在机构页面点开了下拉框==>在切换到赛事页面==>在切换回机构页面发现下拉款已经缓存了,是下拉的状态 1. 2. 3. 解决:每次滑动到别的页面的时候就需要解除绑定的点击事件做法: 1- 首先给父盒子添加指令: v-click-outside="hideBox" 2- script标签中自定义指令 // 自定义指令函数 const clickOutside = { // 初始化指令 bind (el, bind
Android编程实现音量按钮添加监听事件的方法

本文实例讲述了Android编程实现音量按钮添加监听事件的方法.分享给大家供大家参考,具体如下: 很多Android应用都应用到音量按钮,比如翻页,调整音乐声音大小等,但是如果没有对音量按钮进行监听,则无法达到预期的效果.如下代码,就是监听Android手机的音量按钮,开发者可以在相应的位置添加自己需要实现的功能. @Override public boolean onKeyDown (int keyCode, KeyEvent event) { // 获取手机当前音量值 int i = get
vue v-on监听事件详解

在html或jsp页面中我们总能碰到监听DOM事件来触发javaScript代码,下面我们就简单聊聊Vue.js中的监听事件是怎么处理的. 在vue.js中监听事件是通过v-on指令来实现的,先看一下简单的监听事件代码. <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <scrip
Vue中的数据监听和数据交互案例解析

现在我们来看一下vue中的数据监听事件$watch, js代码: new Vue({ el:"#div", data:{ arr:[1,2,3] } }).$watch("arr",function () { alert("数据改变了") }) html代码: <div id="div"> <input type="button" value="改变" @click=&
Android NavigationView头部设置监听事件

NavigationView头部设置监听事件的方法,供大家参考,具体内容如下 1.将XML里的静态引入删除: <android.support.design.widget.NavigationView android:id="@+id/nav_view" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravit
Vue监听事件实现计数点击依次增加的方法

1.实现计数器功能,每点击一次按钮,count值增加一或增加二,鼠标在cordinates行移动时会更新当前坐标,通过自定义函数或者stop属性禁止事件传播. 效果如下: 代码如下: <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>计数器自增函数</title> <script src="vue.js"></s
使用 vue 实例更好的监听事件及vue实例的方法

文章举例说明一下在 vue 中如何更好的监听浏览器事件.原文介绍了一种新增 vue 实例的方法,单独监听事件.这样代码书写较为简练,容易管理. 当监听如下事件的传统做法是: window.scrollX window.scrollY window.innerHeight window.innerWidth 通常需要书写很多代码: created () { this.$el.addEventListener('click', this.someMethod) }, destroyed () { t
关于vue路由监听事件跳转的问题

目录 vue路由监听事件跳转 1.监听路由触发事件的语法 2.可能遇到的问题 vue路由监听不到怎么办方法一方法二方法三 vue路由监听事件跳转 1.监听路由触发事件的语法 watch: { $route: function clearSelectionRow() { console.log("success"); this.$emit("setSelectionFile", []); }, } 代码实现功能:当本
使用vue与jquery实时监听用户输入状态的操作代码

实现效果:input未输入值,按钮禁用 jquery操作代码: html <input type="text" name="" placeholder="请输入用户名" id="userName" > <button class="disabled" id="login">登录</button> css .disabled { pointer-even
python hook监听事件详解

本文实例为大家分享了python hook监听事件的具体代码,供大家参考,具体内容如下 # -*- coding: utf-8 -*- # # by oldj http://oldj.net/ # import pythoncom import pyHook def onMouseEvent(event): # 监听鼠标事件 print "MessageName:",event.MessageName print "Message:", event.Message

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

相关推荐

随机推荐